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的


申明：

一、头部到场最经常使用的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的申明请看慕课网

二、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规划的中心代码，这段代码的粗心是：

假如页面的宽度超过了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宽度或许其他的
四、挪动端另有很多处理体验性问题的东西。能够看看这个