移动端rem自适应布局(切图)

本篇适用于初次使用rem为单位切图而无从下手的童鞋。核心是根据屏幕动态改变根元素字体大小，以达到适配各种屏幕。这只是一个拿来就用的教程。很多东西没有详细说明。不过对于快速做手机端切图很有帮助。

模板：Github

使用：
1.下载完成后首先修改js文件中的基本单位：psd宽度是640就写640，是750就写750.现在的设计稿大部分是以iphone 6 为基准设计的，也就是750px。

2.切图时，我们以100px为基本单位（至于为什么是100px，自己看看我的js代码就知道了），每个元素的宽高，字体等等就直接用rem来写，不用执行减半等操作，设计稿是多少就写多少。下面是一张750px的设计稿

图中那个690px*336PX元素css样式如下：

.box{
    width: 6.9rem;
    height: 3.36rem;
    margin: 0 auto;
    background: #ffffff;
}

因为我们用了动态改变根字体大小，所以.box会自动适应各种屏幕。现在我们就可以愉快的切图了。
使用方法就这么简单。其中最重要的就是那段js代码。。后面的文字，想看的就看看吧。

3.这句是废话，如果你够牛逼就可以直接用px来写各个元素的宽高，字体等等，之后直接用sass或者less转换成rem就行了。

4.调试时记得把浏览器默认最小字体设置为最小。手机端是支持12px以下的字体的。

5.对于不是750px的设计稿，我们其实是可以将其等比缩放到750px的


说明：

一、头部加入最常用的meta内容

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">

width viewport的宽度
initial-scale 初始化缩放比例
minimum-scale 最小缩放比例
maxinum-scale 最大缩放比例
user-scalable 用户是否可以缩放
minimal-ui ios7以上隐藏浏览器导航栏

二、css样式重置

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
button,article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark,
audio, video {
     margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    background: transparent;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
button{background: transparent;}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
html{
    line-height: initial;
}
body{
    font-size: 0.32rem;
}

特别注意下面这段代码必不可少。

html{
    line-height: initial;
}
body{
    font-size: 0.32rem;
}

是为了解决我们由js动态设置html字体过大时，他的line-height对子孙元素的不良影响，请自行体会。
重要三、引入动态改变根节点字体大小的js文件

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth >= 750) {
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

这是rem布局的核心代码,必须放在head头部提前执行，这段代码的大意是：

如果页面的宽度超过了750px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为： 100 * (当前页面宽度 / 750)。
我们刚开始切图时，如果在手机端使用固定宽高px，那么我们的宽高都要减半，以上图的设计稿为例，使用固定px时的代码：

.box{
    width: 345px;
    height: 168px;
    margin: 0 auto;
    background: #ffffff;
}

使用rem时的代码：

.box{
    width: 6.9rem;
    height: 3.36rem;
    margin: 0 auto;
    background: #ffffff;
}

对应公式，我们的iPhone 6 是375px宽度，所以此时的字体为50px。自己算一算是不是和减半的效果一样。

我们在切图时，自己根据设计稿设置是640px宽度或者750px宽度或者其他的