CSS3 REM单位简说

最新推荐文章于 2025-05-26 10:48:05 发布

原创最新推荐文章于 2025-05-26 10:48:05 发布 · 767 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #前端 #REM #WEB APP #单位

前端技术专栏收录该内容

31 篇文章

订阅专栏

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*/
         
 
   