rem、em的区别与使用方式

前言

我们先来看看比较重要的两点：

• rem与em的本质区别
  rem(root element)是参照html的font-size,em(element)是参照父元素的font-size

• 使用rem与em的优点
  以rem/em为单位比px更方便,屏幕尺寸发生变化时只需要更改html/body基数即可,不需要再重新给每个标签写不同的font-size

---

rem

使用rem为单位,系统处理时(将rem转化为px)只会看html的font-size

在使用media query做响应式布局时(以bootstrap为例)：

• a.首先要做的是确定rem的基数(即html的font-size),一般都是以10px为基数(方便计算),这个可以根据自己的习惯来.

• b.确定html基准百分数(rem参照下html的字体大小采取百分数形式),百分数是自己设定的基数除以默认字体大小(16px)的值.比如以10px为基数时,基准百分数就是: 10px/16px=62.5%;即设置html的font-size为62.5%;

• c.当html的基准百分数设置之后,元素使用rem为单位时就是以基数(a中设置的基数值)为基础单位,换算方式为: 10px=1rem;比如要设置一个p标签的字体大小为20px,用rem表示就是2rem(公式: 以rem为单位的值=想要设置的字体大小(20px)/基数值(10px)=2rem).

• d.响应式实现: 使用@media 在监测到屏幕尺寸发生变化时只需为html设置不同的基数值即可

如下面例子: 在屏幕宽度小于414px时以8px为基数,非响应式下(415px-1365px)以10px为基数;大于1366px时以12px为基数

html{
  font-size: 62.5%; // 以10px为基数,此时class为a的标签字体大小为20px
}
 
.a{
  font-size: 2rem;
}
 
@media screen and (max-width: 414px){
  html{
    font-size: 50%; // 以8px为基数,此时class为a的标签字体大小为16px
  }
}
 
@media screen and (min-width: 1366px){
  html{
    font-size: 75%; // 以12px为基数,此时class为a的标签字体大小为24px
  }
}

---

em

使用em为单位,系统处理时(将em转化为px)只会看父元素（本文以body为例）的font-size

使用px为基准

此时只需要设置一个基数即可,然后接下来使用时只需要用想要的字体大小除以设置的基数值即为以em为单位的值;如: 设置em基数为10px,要设置一个标签的字体大小为15px,则em=想要设置的值(15px)/基数(10px)=1.5em.例:

body{
  font-size: 10px; // 以10px为基数,此时class为a的标签字体大小为20px
}
 
.a{
  font-size: 2em;
}
 
@media screen and (max-width: 414px){
  body{
    font-size: 8px; // 以8px为基数,此时class为a的标签字体大小为16px
  }
}
 
@media screen and (min-width: 1366px){
  body{
    font-size: 12px; // 以12px为基数,此时class为a的标签字体大小为24px
  }
}

使用百分比为基准

使用方式同上面以rem为单位的步骤,例:

body{
  font-size: 62.5%; // 以10px为基数,此时class为a的标签字体大小为20px
}
 
.a{
  font-size: 2em;
}
 
@media screen and (max-width: 414px){
  body{
    font-size: 50%; // 以8px为基数,此时class为a的标签字体大小为16px
  }
}
 
@media screen and (min-width: 1366px){
  body{
    font-size: 75%; // 以12px为基数,此时class为a的标签字体大小为24px
  }
}

说明: 具体使用时其实两者差不多,rem也可以直接以px为基准单位,只是两者参照标签不同,使用时需注意