使用 vh/vw vpx 和常规 PX/% 有什么区别？ [复制]

Question

我用 SOF 很长时间了，但从来没有问过问题。今天我在 Firefox 的网站上，注意到它谈论 px 和 % 好像它已经过时了。该站点建议使用 ViewHeight 和视图宽度，或视图像素（vh 和 vi 或 vpx）。使用...有什么区别？

width: 100%;

和

width: 100vw;

..???他们为什么做出改变？

Answer 1

对网络元素使用相对大小（例如宽度/高度/字体大小等）总是更好 - 因此设置显式像素在上个世纪是非常棒的。使用 em 甚至更好的 REM 值设置 fontsize 并使用百分比设置 height / widht 是更好的方法。

宽度：100%； - 将元素的宽度调整为其容器的 100%

宽度：100vw； - 将元素的宽度调整为视口宽度的 100%

1vw = 视口宽度的 1%

100vw = 100% 的视口宽度

同理——

1vh = 视口高度的 1% 100vh = 100% 视口高度

有趣的是，还有 vmin 和 vmax - 它们与视口的较小和较大边有关 1vmin = 视口最小边的 1% 100vmin = 视口最小边的 100%

1vmax = 视口最大边的 1% 100vmax = 视口最大边的 100%

vmin 和 vmax 有助于在您旋转屏幕时更改内容，其中 vw 和 vh 不会改变，但 vmin 和 vmax 会改变。