什么是视口单位?

在CSS规范中,有4种类型的可用视口单位:

  • vw — 1vw 等于视口宽度的 1%
  • vh — 1vh 等于视口高度的 1%
  • vmin — vw 和 vh 中的较小值
  • vmax — vw 和 vh 中的较大值
  • 视口,即浏览器屏幕大小,1vw 等于浏览器宽度的 1%,100vw 即整个浏览器的宽度。

简单来说,它和px,rem一样就是个单位,适当的使用这种单位有时候能出奇效。

:IE9使用vm代替vmin。它不支持vmax。
澄清:1vmax等于1vh在纵向模式,而在横向模式下,1vmax将等于1vw。
个人建议:使用视口给元素设置宽高时,为了避免比例不协调,使用同一个单位比较好,如vmin、vmax。

兼容性

IE9+局部支持,chrome/firefox/safari/opera支持,ios safari 8+支持,android browser4.4+支持,chrome for android39支持

博主使用情况

我在 https://tool.zezeshe.com/ 上就深度使用了这个单位,甚至字体大小都用这个设置的。

费了很久的时间去调试,现在在我电脑上看已经感觉可以了
但是,
如果你的显示器很大,那么字体也会超乎寻常的大

还有就是高度设置成100vh在一些手机浏览器上显示上有些奇怪,100vh应该是铺满全屏,但是在手机浏览器上却可以滚动,相当于高度设置多了,猜测原因是视口可能计算了手机整个屏幕的视口,而不是浏览器视口。

yodu模板上只有一处使用了视口单位,因为写模板时已经忘记这个单位了,后来因为模板有个地方不是很美观求助香菇时,他提到了这个才想起来,于是用上了下。

博主评价

正常写模板建议还是主要用px,rem等传统单位,视口单位作为辅助单位比较好。
视口单位,解决某些问题会有奇效,但是如果作为主要单位使用时会很坑...