摘要：用做自適應單位也是一種流行的做法簡介本篇適用于初次使用為單位切圖而無從下手的童鞋。核心是根據屏幕動態改變根元素字體大小，以達到適配各種屏幕。不過對于快速做手機端切圖很有幫助。

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內容

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寬度或者其他的
四、移動端還有好多解決體驗性問題的東西。可以看看這個