对于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，并考虑身体边距？

回答

相关问题