一、前言

这几天在折腾 hugo 博客的时候发现有不少的博客都全面使用了 rem 进行移动端适配处理，相比最长使用的 em，px，pt，这里记录一下对 rem 的一些入门理解。

二、兼容性

rem 目前支持大部分主流浏览器；在移动端 ios-6.1系统以上，android-2.1系统以上都支持。详细的各种设备支持列表可以在 https://caniuse.com/#search=rem 查看。

image.png

三、rem 设置字体大小

rem是（font size of the root element），意思就是根据网页的根元素来设置字体大小，和 em（font size of the element）的区别是，em 是根据其父元素的字体大小来设置，而 rem 是根据网页的跟元素（html）来设置字体大小的。

举一个简单的例子，现在大部分浏览器 IE9+，Firefox、Chrome、Safari、Opera，如果我们不修改相关的字体配置，都是默认显示 font-size 是 16px 即：

  1. html {
  2.     font-size:16px;
  3. }

那么如果我们想给一个 p 标签设置 12px 字体大小那么用 rem 来写就是：

  1. p {
  2.     font-size: 0.75rem; //12÷16=0.75（rem）
  3. }

基本上使用 rem 这个单位来设置字体大小基本上是这个套路，好处是假如用户自己修改了浏览器的默认字体大小，那么使用 rem 就可以根据用户的调整的大小来显示了。 但是 rem 可以适用于字体，同样可以用于 width , height , margin 这些样式的单位。

原文：https://gameinstitute.qq.com/community/detail/105566