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

1.文章好久没更新，里面的东西可能并不适用如今的大环境，配套代码太老旧也只是个参考，不要直接用到生产上。
2.用vw作自适应单位也是一种流行的作法

简介：
本篇适用于初次使用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的


说明：

1、头部加入最经常使用的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以上隐藏浏览器导航栏
具体关于viewport的说明请看慕课网

2、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对子孙元素的不良影响，请自行体会。
重要3、引入动态改变根节点字体大小的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布局的核心代码，这段代码的大意是：

若是页面的宽度超过了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宽度或者其余的
4、移动端还有好多解决体验性问题的东西。能够看看这个