浅谈移动端rem的用法-创新互联

一 什么是rem？

多端合一响应式网站:PC+平板+手机,同一后台修改数据多端同步更新提交您的需求,获取网站建设与营销策划方案报价,我们会在1小时内与您联系!

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

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

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

图片摘自 http://caniuse.mojijs.com/Home/Html/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://g  ithub.  com/am fe/lib-flexible

说起移动端适配，怎么能少 了淘宝的移动端~

这个教程足够详细了（如果绝对还不够的话，可以参考下这个地址  h  ttp  s://gi  thu  b.com/am  fe/article/issues/17 ，其中还有现成的demo）。

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

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

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页名称：浅谈移动端rem的用法-创新互联
本文来源：http://mswzjz.cn/article/epejo.html