时间戳

首页 > 解决方案 > 使用 vh/vw vpx 和常规 PX/% 有什么区别？

javascript - 使用 vh/vw vpx 和常规 PX/% 有什么区别？

问题描述

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

width: 100%;

和

width: 100vw;

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

标签： javascripthtmlcsspixel

解决方案

使用 web 元素的相对大小（例如宽度/高度/字体大小等）总是更好 - 所以设置显式像素在上个世纪是非常棒的。使用 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 会更改。

推荐阅读