【去哪儿前端干货分享】教你用rem适配移动端布局

很多新手刚做移动端的时候，一直在纠结用px还是用rem，还有人问百分比怎么用，老王也不是大神，我在做移动端的时候，经常用的是rem，鉴于很多人一直在问这个问题，我整理了这篇文章，如果有问题，还请批评指正。

rem是什么？

rem:W3C官网描述是“font size of the root element”，即rem是相对于根元素。

使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

用css方式去适配

@media screen and (min-width: 280px) {html{font-size:87.5px;}}
@media screen and (min-width: 320px) {html{font-size:100px;}}
@media screen and (min-width: 375px) {html{font-size:117.18px;}}
@media screen and (min-width: 414px) {html{font-size:129.375px;}}
@media screen and (min-width: 440px) {html{font-size:137.5px;}}
@media screen and (min-width: 480px) {html{font-size:150px;}}
@media screen and (min-width: 520px) {html{font-size:162.5px;}}
@media screen and (min-width: 540px) {html{font-size:168.75px;}}

将此代码放到css文件的头部，本实例是按照屏幕宽度为320px为标准的（如果你们的ui是按照375px来出的设计稿，那么请自行换算）。适配了主流的一些手机。ok，怎么使用呢？看上面的范例，320px对应后面的font-size是100px，也就是100px＝1rem。所以，你写16px的时候，就是0.16rem了。

js适配

有很多人就问，那按照你这样，我ui的稿子，这次是按320px，下次是按375px，再下次，ui不开心了，给我弄了个280px，我每次都要换算吗？如果出现这个问题，请换你们的ui。开玩笑了，ok，当然有方便的方法，那么就是按照js来适配。

(function() {    
    var docEle = document.documentElement,
        initWidth = 320, initSize = 100,
        resizeEvent = 'orientationchange' in window ?'orientationchange' : 'resize';    
    function init(win) {        
        var w = win.innerWidth,
            h = win.innerHeight;
        docEle.style.fontSize = w / initWidth * initSize + 'px'; }        
        window.addEventListener(resizeEvent, function(e) {
        init(window);
    }, false);
    init(window);
})();

将这端代码放到你的js文件中，那么它会自动的在你的html上加上对应的大小，只要将initWidth和initSize两个值分别对应上你的屏幕宽度和基准大小就行了，比如，initWidth是320,initSize是10，那么，在320屏幕宽度下1rem＝10px。

你现在知道如何用rem适配移动端了吗？

更多干货内容，欢迎关注公众号：知了python