阅读(2808) (1)

谈谈CSS3的长度单位(vh、vw、rem)

2017-06-19 18:38:03 更新
      在CSS3中,新增了很多长度单位,今天就来谈谈:
  • vw、vh、vmin、vmax
  • rem与em

1、vw、vh、vmin、vmax
vhvwvminvmax这四个单位都是基于视口的,含义如下:
(1)vw、vh
vw是相对视口(viewport)的宽度而定的,长度等于视口宽度的1/100

假如浏览器的宽度为200px,那么1vw就等于2px(200px/100)。

vh是相对视口(viewport)的高度而定的,长度等于视口高度的1/100

假如浏览器的高度为500px,那么1vh就等于5px(500px/100)。

(2)vmin、vmax
vminvmax是相对于视口的高度和宽度两者之间的最小值最大值

如果浏览器的高为300px、宽为500px,那么1vmin就是3px,1vmax就是5px;如果浏览器的高为800px,宽为1080px,那么1vmin也是8px,1vmax也是10.8px。

兼容性:兼容性

2、rem
rem是相对于根元素(html)的字体大小(font-size)来计算的长度单位。

html{font-size: 62.5%}  /* 10 ÷ 16 × 100% = 62.5% */


body{font-size: 1.4rem;} /* 1.4 × 10px = 14px */

如果你没有设置html的字体大小,就会以浏览器默认字体大小,一般是16px。

注意:由于浏览器默认最小字体大小的限制,如果设置的根元素字体大小小于默认最小字体大小,那么就会以默认最小字体大小设置根元素。比如:在chrome中,最小字体大小是12px,如果你设置的字体大小小于12px,还是会以12px设置:

html{font-size: 62.5%}  /* 16px * 62.5% = 10px */


body{font-size: 1.4rem;} /* 1.4rem * 12px = 16.8px */

本意设置body的字体大小为14px,可是实际上却是16.8px,就是因为10px小于12px,所以采取了12px。

所以,我一般都是这样设置:

html{font-size: 20px;}


body{font-size: 0.7rem;}  /* 0.7 * 20px = 14px */


说到rem,我们还会想到em,两者都是相对单位,由浏览器转换为像素值,那两者有什么区别?使用哪个更好呢?

rem与em的区别:
  • rem是相对于根元素(html)的字体大小,而em是相对于其父元素的字体大小
  • em最多取到小数点的后三位

<style>

  html{ font-size: 20px; }

  body{ 

    font-size: 1.4rem;  /* 1rem = 28px */

    padding: 0.7rem;  /* 0.7rem = 14px */

  } 

  div{

    padding: 1em;  /* 1em = 28px */

  }

  span{

    font-size:1rem;  /* 1rem = 20px */

    padding: 0.9em;  /* 1em = 18px */

  }

</style>


<html>

  <body>

    <div>   

      <span></span>  

    </div>

  </body>

</html>

在上面的代码中,我们将根元素(html)的字体大小font-size设为20px,body的字体大小设为1rem,那么转换为像素就是28px(20 × 1.4),接着我们又将div的padding设为1em,由于其基于父元素,所以转换为像素是28px ( 28 × 1),然后我们又将span的字体大小设为1rem,也就是20px,由于其自身设置了字体大小,所以padding设为1em,转换为像素是20px(20 × 1),而不是乘以其父元素的字体大小28px(28 × 1)。

注意:当元素自身设置了字体大小,那么如果它的其他css属性也使用em单位,则会基于它自身的字体大小。(就像上面例子的span的padding一样)

基于上面这些原因,个人更倾向于使用rem,因为em使用不当的话,当出现多层继承时,会很容易混淆,比如:

<style>

  html{ font-size: 20px; }

  body{ 

    font-size: 0.9em;  /* 1rem = 18px */

  } 

  div{

    font-size: 0.8em;  /* 1em = 14.4px */

  }

  span{

    font-size: 0.9em;  /* 1rem = 12.96px */

  }

</style>


<html>

  <body>

    <div>   

      <span></span>  

    </div>

  </body>

</html>

看到没有,使用em时,如果其祖先元素都是用了em,那么就会像上面一样,body继承其父元素html的字体大小,而div又继承其父元素body的字体大小,而span又继承其父元素div的字体大小,最终span的字体大小最终是12.96px(20 × 0.9 ×0.8 × 0.9)。

而rem总是相对于根元素(html)的,也就是说,不管哪里使用了rem单位,都是根元素的字体大小 × 数字,由浏览器转为像素值。

对于rem的兼容性,无须担心,点击查看:兼容性

当然,em和rem各有优缺点,简单的使用规则:
  • 如果这个属性根据它的font-size进行测量,则使用em
  • 其他的一切事物属性均使用rem.

两者都不使用的情况:
  • 多列布局,一般使用百分比%

这里提供了一个px、em、rem单位的转换工具:http://pxtoem.com/