宽度: 100% 和宽度: 100vw 之间的差异？

小开

最佳答案

Vw 和 vh 分别代表视窗宽度和视窗高度。

使用 width: 100vw代替 width: 100%的区别在于，虽然 100%将使元素适合所有可用空间，但视口宽度有一个特定的度量，在这种情况下是可用屏幕的宽度，包括文档边距。

如果设置样式 body { margin: 0 },100vw 的行为应该与100% 相同(对于 body的子元素)。

附加说明

使用 vw作为网站中所有内容的单元，包括字体大小和高度，将使网站始终与设备的屏幕宽度成比例地显示，而不管其分辨率如何。这使得确保您的网站在工作站和移动设备上显示完全一样变得非常容易。

你可以在你的 body CSS 中设置 font-size: 1vw(或者任何适合你的项目的大小) ，在 rem单元中指定的所有东西都会根据设备屏幕自动缩放，所以很容易将现有的项目甚至框架(例如 Bootstrap 已经使用 rem作为所有东西的单元)移植到这个概念中。

小开

海文纳德的回答似乎并不完全正确。我发现 vw 填充了 viewport 的宽度，但是没有考虑滚动条。因此，如果您的内容高于 viewport (这样您的站点就有了一个垂直滚动条) ，那么使用 vw 会产生一个小的水平滚动条。我不得不为 width: 100%切换 width: 100vw以去掉水平滚动条。

小开

你可以通过添加 max-width来解决这个问题:

#element {
width: 100vw;
height: 100vw;
max-width: 100%;
}

当你使用 CSS 代码 width: 100vw;使得包装器全宽时，你会注意到页面中有一个水平滚动，这是因为 html和 body的 padding和 margin标签添加到了包装器的大小上，所以解决方案是添加 max-width: 100%

小开

@ Havenard 的回答为这个问题提供了完美的解释。

当你有一个带滚动条的站点和一个应该适合整个屏幕宽度的元素时，你就能够注意到 100vw和 100%之间的关键区别。

选择一

下面是一个相同的例子。
我所做的一切在下面的代码是改变宽度的 <h1>标签从 100vw到 100%当你悬停它。

body{
/* margin: 0; */
}


.scroll{
height: calc(110vh);
}


h1{
width: 100vw;
/* width: 100%;*/
text-align:right;
outline: 5px solid black
}


h1:hover{
width: 100%;
}


h1:before{
content: "100vw "
}


h1:hover:before{
content: "100% "
}

<div class = "scroll">
<h1>Width</h1>
</div>

如果你运行上面的代码片段并将文本悬停，你会注意到两件事:

水平滚动条消失了
整个文本将是可见的敬你

注意: 在运行上面的代码片段之后，您可以在浏览器 devtools 中使用上面的代码，看看它是如何影响元素的

选择二(铬和边缘)

.scroll{
height: calc(110vh);
display: flex;
align-items: baseline;
}


h1{
width: 100vw;
/* width: 100%; */
text-align:right;
outline: 10px solid black
}

<div class="scroll">
<h1>Test</h1>
</div>

在您自己的项目中可视化地看到差异的另一种方法是将 display:flex样式设置为具有100vw 的元素。

在浏览器 devtools 中突出显示此元素时，可以注意到元素右端的向左箭头。此外，您还可以看到突出显示的元素跨越滚动条的阴影，这表明它正在考虑整个屏幕宽度(包括滚动条宽度)

解决类似问题的其他问题有: