专否 写文章

冯纪忠雄,Less Is More

Nov 21, 2018
Follow

CSS中相对于viewport的长度单位

CSS中的长度单位分为两类,绝对单位相对单位。绝对单位,比如像素px、厘米cm等;相对单位,比如em等。

而这里要说的是相对单位中的vw、vh、vmax、vmin这种单位。

长度单位 vw

相对于视窗viewport的宽度的1%而言,1vw就是等于浏览器视窗宽度的1%

1vw = 1% * 浏览器的窗口宽度

长度单位vh

相对于视窗viewport的高度的1%而言,1vh就是等于浏览器视窗高度的1%

1vh = 1% * 浏览器的窗口高度

长度单位 vmin

1vmin等于1vw和1vh两者之间的实际尺寸较小者

1vmin = min( 1vw, 1vh )

长度单位 vmax

1vmax等于1vw和1vh两者之间的实际尺寸较大者

1vmax = max( 1vw, 1vh )


这四种相对长度单位,更适合在自适应要求高的网页设计中使用,比如移动端网页。

喜欢这个文章 | 分享 | 新建跟帖