對於CSS3，我們應該如何使用新單位vh，vw，並考慮身體邊距？

在CSS3中，有這2個新單元：vh和vw。因此，我們可以使用對於CSS3，我們應該如何使用新單位vh，vw，並考慮身體邊距？

height: 80vh; 
width: 60vw;

來縮放80％視口高度或60％視口寬度的塊。

但我認爲通常情況下，默認body元件在所有4個方面一個8px餘量，所以我們應該如何將這個爲我們的使用vw和vh如果我們確實需要使用100vh和100vw（或幾乎是量掩蓋寬度和高度，但與身體的邊距）？一些選項包括（1）將身體邊距重置爲0，（2）將身體邊距重置爲8px（以確保它在所有瀏覽器中相同（3）使用height: calc(100vh - 8px)和width: calc(100vw - 16px)設置適當的高度和寬度......但在8px和16px顯得太硬編碼。0似乎是最簡單，最有效的解決方案可能是什麼好的做法來處理呢？

來源

2015-12-02 太極者無極而生

重置body元素。

來源

2015-12-02 22:27:49 user4771351

但是頁面上的其他元素呢？那麼當他們需要像往常一樣的保證金時，他們需要有'保證金：8px'？ –

@太極者無極而生是的，或者不需要重置並在需要覆蓋全寬的地方設置負邊距。無論哪種方式，這可能會告訴你沒有好的做法，只有根據需求做出不同的好做法。 – LGSon

不，我並不是說我想要全寬。我說我想要除了身體的左右邊距之外的全部寬度。我想我們可以說：沒有好的做法（但）。隨着事情的發展，可能幾乎所有的現代瀏覽器在所有四邊都有8px的邊距，所以假設8px是安全的，或者把它作爲SASS –

（4）你必須定義身體保證金使用vh和vm單位。

body { 
    margin: 0.5vh 0.5vw; 
} 

.content { 
    width: 99vw; 
    height: 99vh; 
}

這是唯一確保視口高度和寬度都達到100％的方法。

來源

2015-12-03 09:43:24 Adam

有趣的解決方案中的一個變量......儘管寬度的視口是1000px，那麼我期望margin已經有8px的值，否則它可能太少了，所以也許你的解決方案可能只有0.8vw和內容寬度98.4vw –

對於CSS3，我們應該如何使用新單位vh，vw，並考慮身體邊距？

回答

相關問題