浅谈移动端rem的用法

一 什么是rem？

“font size of the root element 这是w3c的定义

也就是说是相对于根节点（html节点）的字体大小的单位。

目前主流的浏览器基本都支持rem这个单位，大部份的默认字体单位是16px。

图片摘自 htt p://ca  nius e.m o jijs .co m /Hom  e/H tml/item/  key/rem/  index.html

 二 简单应用。

既然肯定在各个主流浏览器都能食用的话，咱们就放心大胆在移动端进行开发了。

举个例子说明

-size:62.5%; --size:1

因为咱们选定的浏览器默认字体为16px，将根节点html设置为 font-size:62.5%;，这样换算下来的话 1rem = 10px ，在单位的计算方便将会方便不少。

三 响应式使用。

在实际开发过程当中，不管是移动端仍是pc端都要兼容各类分辨率的设备，因此实际尺寸是要响应式的。

假如说上个例子的62.5%是基于iPhone5的尺寸，也就是说是320*568的尺寸

若是是ipad尺寸的时候，只要相应的扩大倍数便可

@media only screen and (min-width: 768px){
    html {
        font-size: 150%!important;
    }
}

注：利用媒体查询，可根据本身的实际须要，设定不一样的尺寸。

四 rem的进阶使用

先甩上地址 ht tps://githu  b.c   om/a   m  fe/lib- flexible

提及移动端适配，怎么能少了淘宝的移动端~

这个教程足够详细了（若是绝对还不够的话，能够参考下这个地址    htt   ps:/   /gith ub.com/a    mfe/ artic   le/is  sues/17 ，其中还有现成的demo）。 

在引入flexible.js事后，关于px转成rem的方法：

在sublime中是有直接转换的插件，有兴趣的童鞋能够去研究下。

在sass/less预编译下也可快速计算当前尺寸。