CSS - 如何更改瀏覽器高度並使網站不受影響？

-2

例如，當您在堆棧溢出時更改瀏覽器的高度時，頁面上的內容不會更改。但是，如果您訪問我的投資組合：http://seanrobenalt.com/並更改瀏覽器高度，某些元素會被縮小。似乎無法弄清楚發生了什麼事。CSS - 如何更改瀏覽器高度並使網站不受影響？

來源

2017-08-19 Sean Robenalt

發生了什麼事是你已經設置如下內容：分別

.header-logo { 
    background-color: rgba(229,229,229,0.4); 
    box-sizing: border-box; 
    display: block; 
    height: 10vh; 
    padding-top: 10px; 
    position: relative; 
    text-align: center; 
    width: 10vh; 
}

你的高度和寬度都設置爲height: 10vh;width: 10vh; 。

什麼是vh的簡稱？ viewport-height和vh是測量單位，但與px不同，它不是絕對的。

無論您如何調整窗口大小，因爲我們正在談論屏幕上的靜態物理像素，因此高度或寬度爲10px的任何東西的高度或寬度始終爲10px。

vh,vw或%另一方面是相對計量單位。以%爲例。如果你製作一個div，這個寬度是100％ - 它將延伸整個父元素的長度。如果父元素的寬度是100px，那麼子元素將是100px的100％，這是100px寬。如果將它設置爲100px的50％ - 它的寬度爲50px。

那麼如果將元素設置爲100vw會發生什麼？它可以被簡單地描述爲整個瀏覽器寬度的100％ - 或「視口」。

因此，100vh將是100％的視圖高度。（視口高度）。

而你的圖像是10vh，這意味着它總是瀏覽器窗口高度的10％。所以，如果瀏覽器的大小精確到500px，那麼您的圖片將會高出50px。

你需要做的是設置圖像的大小，以保持它的高度和寬度。

我建議你設置幾個div的小操場，並開始玩各種不同的測量類型。

讓正在使用width: 100px;height: 200px;width: 100%;height: 100%;width: 100vw;height: 100vh;少數的div和地點的div對方，看看會發生什麼。

希望這會有所幫助。

來源

2017-08-19 19:05:22 Crashtor

謝謝！使用像素代替vh和vw修復了我的網站。感謝幫助！ –

很高興幫助。如果您認爲這是我們問題的正確答案，請務必將答案標記爲正確。 – Crashtor

您正在使用vh（視口高度）單位計算頁面上各種元素的佈局。 100vh相當於您瀏覽器窗口在任何特定時刻的高度，因此調整瀏覽器的大小正在執行它編碼的操作。

實例元素我看到檢查您的網站：

.full-hero { 
    background-color: #c7dbfc; 
    background-size: cover; 
    box-sizing: border-box; 
    height: 90vh; 
    padding-top: 10vh; 
}

來源

2017-08-19 19:01:55

CSS - 如何更改瀏覽器高度並使網站不受影響？

回答

相關問題