扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
一 什么是rem？
网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、成都小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了昌乐免费建站欢迎大家使用！
“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预编译下也可快速计算当前尺寸。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网