说说手机网页开发 REM 单位的使用

Question

手机端开发基本都是使用的 REM 作为计量单位，关于什么是 REM 我就不多说了，简单来将就是 1rem 等于 HTML 标签的 font-size 大小，所以根据手机宽度改变相对应的 font-size 大小就可以实现自适应了，媒体查询就只要定义 html 标签的 font-size 大小即可。

• 首先先说一个常识，浏览器的默认字体大小都是16px，包括 PC 和 移动端的网页。
• 目前 IE9+、Firefox、Chrome、Safari、Opera 等的主流版本都支持了 rem ，所以在使用上基本不用担心兼容性。

我们拿到的设计稿一般都是 640 宽度的，假设我们这样定义 html 标签的 font-size ：

html{
  font-size:20px
}
@media only screen and (min-width:400px){
  html{
    font-size:21.33px!important
  }
}
@media only screen and (min-width:414px){
  html{
    font-size:22.08px!important
  }
}
@media only screen and (min-width:480px){
  html{
    font-size:25.6px!important
  }
}

那么我们将浏览器的响应式定义到 320 的宽度，此时 1rem = 20px ，如果设计稿中的一个按钮宽度是 120px，那么换算成 rem 就是 6rem，在 iPhone 7 Plus 上，按钮的宽度自动被设置为 132.48px，就这样我们只需要响应式的定义 html 标签的字体大小，就可能做到所有元素自适应。