CSS 中的rem,em,vh,vw一次说清楚

  关于css中的长度单位,我们用的最多就是px,因为他简单直接。但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通。

  然而rem,em,vh,vw就可以有效的解决这一问题。让我们来看看这些东西是个啥?

  首先是rem,W3C官网描述是“font size of the root element”,即rem是相对于根元素。概念不好理解接咋们就直接直接看demo:

DOM结构如下:

CSS 中的rem,em,vh,vw一次说清楚

CSS 代码如下:

CSS 中的rem,em,vh,vw一次说清楚

效果如下:

CSS 中的rem,em,vh,vw一次说清楚

  

      现在对于rem是否有了点认识,设置html的font-size大小后,就有了参照值,其他地方的px就可以替换成rem了,就像demo所展示的html的font-size大小为16px,div中的字体大写分别为1rem,1.5rem,2rem。换算成px就分别分 1* 16=16px,1.5*16=24px,2*16=32px。不仅仅是字体大小,html所有元素的宽高也可以写成rem为单位,同样是参照html的font-size的值。再扩展一下就是说所文档中所有的可以使用px表示的都可以替换成rem。

  那么这么做的意义又是什么呢?当你需要做相应式布局时,rem就能发挥其正真的威力。通过匹配不同的设配的屏幕大小,设置其html的font-size的值,然后就可以放心大胆的使用rem,其他的就可以交给浏览器处理了。

em,vh,vw原理大同小异。不同的是参考点不一样,em参考的父节点的font-size的大小,即当父节点的fong-size为12px,子节点设置宽度为10em,font-size为2em,则宽度换算成px是12*10=120px,字体大小为12*2=24px,若孙节点的高度设置10em,那么换算成px又是多少呢? 当然是父节点的fong-size值24px乘10em,结果为240px,所以em永远只关心上一级的font-size。那么问题来了,上一级没有设置font-size怎么办?不要慌,元素的font-size默认继承父节点的font-size值。这下是不是就对em了然于胸了。

  接下来是vh和vw。看着简写你可能看不出什么东西。我们展开看看 vh:viewport height,vw:viewport width 。viewport叫做可视区域。这下是不是就感觉明白了vh和vw。没错就是你想的那样,vh和vw分别参照可视区域的高度和宽度。

  所以这些单位都是相对的,只要知道参考点,那么就很简单了。目前我所做的项目中,都是统一使用的rem 做的适配,方便有效,谁用谁知道!

  作为一个新人,欢迎大家指导批评。

上一篇:iOS 自带二维码扫描功能的实现


下一篇:POJ3162 Walking Race(树形DP+尺取法+单调队列)