css3的v系尺寸
发布在没事瞎琢磨2015年5月2日view:3633
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

今天来说说vh,vw,vmin,vmax,这些css3中定义的尺寸单位,能在css中解析原始包含块的宽高信息,用途还是有些的.

根据css3标准的定义,这些v系列的尺寸全称为viewport-percentage length, 顾名思义,它们定义了相对于原始包含块的百分比尺寸。当原始包含块的尺寸改变时,你用这些单位定义的尺寸也会相应地改变。当根元素的overflow为auto时,则看作原始包含块没有滚动条。 注:原始包含块的尺寸会受到视口滚动条的影响。(这个影响或许是对vw的影响,vw的值会因此少去滚动条的宽度)

vw

相当于原始包含块的长度的1%,如果我们设置一个元素的font-size:8vw,如果此时该元素包含块的长度为200px,那么该值为8*200/100=16px

vh

相当于原始包含块高度的1%

vmin

等于vw和vh的最小值

vmax

等于vw和wh的最大值 ​

就我而言,目前我会将这个单位用在两个方面:

  • 可以用来做移动设备中字体的单位。 比如这样:
body{
    font-size:5vh;
}
#header{
    font-size:1rem;
}
#content{
    font-size:0.8rem;
}

这样做的好处就是可以根据设置的大小来决定字体的大小,设置在body上的原因就是要做相对固定的字体大小设置,后续不论哪个元素的字体大小都根据根元素来使用rem设置。

  • 用于做高度为100%视口高度的实现,这个不用多讲了。这里顺便推荐另一种100%高度的实现方案,就是设置完父元素为relative后,子元素设置absolute, top:0;right:0;left:0;bottom:0也是可以的。

聪明的你肯定能想出更多的使用场景,希望大家能添加批注或评论。

浏览器兼容性

你可以直接查看http://caniuse.com/#search=vh

评论
发表评论
暂无评论
WRITTEN BY
rubyisapm
作为一个前端,尤其是前端妹纸,一定要...优雅~
TA的新浪微博
PUBLISHED IN
没事瞎琢磨

没事瞎琢磨…

友情链接 大搜车前端团队博客
我的收藏