rem单位

rem单位介绍

• 说明

  rem (root em)是一个相对单位，类似于em，em是父元素字体大小。

  不同的是rem的基准是相对于html元素的字体大小。

  比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

  /* 根html 为 12px */
  html {
     font-size: 12px;
  }
  /* 此时 div 的字体大小就是 24px */       
  div {
      font-size: 2rem;
  }
  

• rem的优势

  父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来总体控制整个页面的元素大小。

  选择性使用rem作为单位，这样在不同尺寸的设备上，通过修改根节点的font-size大小，实现等比例缩放

• 应用场景

  1. em就是为字体和行高而生的，有些时候子元素字体就应该相对于父元素，元素行高就应该相对于字体大小；

  2. rem在PC端没有被广泛使用，主要是对低版本浏览器的兼容性问题，比如从ie9才开始支持rem，但是只是部分支持。ie11才全部支持。 ie9，ie10部分支持，例如：rem用在伪元素和缩写样式上就不支持。加上栅格布局方案能胜任大多数项目，所以使用场景少。

     而移动端为了适应各种屏幕大小，对rem兼容性又好，rem布局方案一直是移动端的热门。

• 建议

  如果pc项目像移动端一样要兼容各种屏幕大小，又不需要考虑ie9以下，很多元素的宽高比是固定的，rem方案更好。