为什么使用rem

  • px 为固定单位，字号和字体大小不会因为设备屏幕的缩放而发生改变，rem 为相对单位，可以灵活的适配各种设备屏幕的尺寸；
  • rem 相对于根元素的设置，因此当一些奇葩需求需要调整整体字号大小时，px 单位就需要全部修改，而 rem 只需要改根元素里的比例即可。

几个知识点

  • rem 是 CSS3 推出的属性，因此在IE6-8不支持。同时，在IE9/IE10时，伪元素不支持 rem 属性。IOS Safari5.0-5.1 在使用媒体查询时不支持 rem ；
  • rem 是以根元素作为基准的，在里的”font-size”属性可以设置rem的基础数据；
  • 使用 rem 属性前需要在标签里增加声明：
<meta name=“viewport” content=“initial-scale=1,maximum-scale=1, minimum-scale=1”>
  • rem 属性在大部分浏览器内默认尺寸为 16px，少数国内浏览器并不是16px，如果遇见bug需要测试其默认尺寸；
  • 一般教程里设置的 html {font-size: 62.5%;} ，其实是将整体的 rem 属性设置成为 10px 大小，这样就方便了 rem 属性的使用，即 1.2rem = 12px、1.4rem = 14px；
  • 62.5% 这个比例来源于公式：10 ÷ 16 × 100% = 62.5%，即 （想设置的默认尺寸） ÷ （rem 属性的默认尺寸）× 100%；
  • 按照以上的公式就可以得出结论：1.4rem = 1.4 × 10px = 14px；

rem 与 em 的区别

em 在 rem 之前提出，本质的区别在于：em 是相对于父元素的字体来进行计算；而 rem 是相对于根元素的字体来进行计算。
由于项目的推进，父元素的设置会越来越复杂，因此使用 em 就会面临各种被某个父元素莫名其妙影响的局面，这就是为什么后期在字体设置上 em 被 rem 取代的原因之一。