爱好者 > Typecho > 前端笔记 > CSS视口单位的一次深度使用

CSS视口单位的一次深度使用

作者:佚名 来源:爱好者 时间:2017-04-23

什么是视口单位?
在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.qqdie.com/ 上就深度使用了这个单位,甚至字体大小都用这个设置的。
 
费了很久的时间去调试,现在在我电脑上看已经感觉可以了
但是,
如果你的显示器很大,那么字体也会超乎寻常的大
 
还有就是高度设置成100vh在一些手机浏览器上显示上有些奇怪,100vh应该是铺满全屏,但是在手机浏览器上却可以滚动,相当于高度设置多了,猜测原因是视口可能计算了手机整个屏幕的视口,而不是浏览器视口。
 
yodu模板上只有一处使用了视口单位,因为写模板时已经忘记这个单位了,后来因为模板有个地方不是很美观求助香菇时,他提到了这个才想起来,于是用上了下。
 
博主评价
正常写模板建议还是主要用px,rem等传统单位,视口单位作为辅助单位比较好。
视口单位,解决某些问题会有奇效,但是如果作为主要单位使用时会很坑...