一、前言

这几天在折腾 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