CSS3 REM单位简说

1.什么叫REM

     rem（font size of the root element）是指相对于根元素（html标签）的字体大小的单位。

 

2.REM有什么用？

    现在我们在制作网页的时候，用PX单位+百分比。在到放大和缩放，会看到样式混乱，部分换行错误等问题。这样制作的网页只能在100%正常显示。但用户正常也不会手多去放大缩放去看。所以一直都是业界做法。没毛病！ 但到了移动端的出现，屏幕开始出现各种尺寸，4.0，4.3，5.0，6.0等分辨率也从1024到2048不断攀升和变化。而且现在还会转屏问题，那就不像电脑端那样，只有一种宽屏规格。是宽屏和窄屏都会出现。因此都需要考虑到。响应式的设计，可以有效适应各种屏幕的显示。但庞大的工作量，不是每个项目都适用。很多前端工程师开始使用em做法，但em的相对根据父级尺寸而变化的。这样只层次结构多，很容易出现问题。需要极其小心。因此CSS3 REM的出现诞生了，REM和EM的区别就是相对标准，REM是以HTML根为标准，EM以父级元素为标准。REM简单方便。是推荐做手机端单位首选。

3.REM的算法

    rem按照HTML里面设置的值，进行按比例计算。详细算法请看下面例子，看完就会明白了。

rem例子

html{      font-size : 20px ; } .btn {      width :  6 rem;      height :  3 rem;      line-height :  3 rem;      font-size :  1.2 rem;      display : inline- block ;      background :  #06c ;      color :  #fff ;      border-radius: . 5 rem;      text-decoration :  none ;      text-align :  center ;    }

看到上面的例子:

html font-size:20px;

6rem = 120px;

1rem = 120px/6 =  20px;

就是1rem = 20px(html设置的)，其他的尺寸都是根便签为标准 进行计算。

如果html值设置为40px，那么1rem = 40px

 

 

4.REM和百分比关系：

html { font-size :  62.5% ;} /*10 ÷ 16 × 100% = 62.5%=10px*/ body { font-size :  1.4 rem;} /*1.4 × 10px = 14px */ h 1   {  font-size :  2.4 rem;} /*2.4 × 10px = 24px*/

我在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）。

 

5.最后我们再来看一看他的兼容性：

css3起步基本都是ie9以上，用在移动设备上兼容没问题。而PC web端的话，就建议改用em也可以达到相同效果。