摘要：用做自適應(yīng)單位也是一種流行的做法簡(jiǎn)介本篇適用于初次使用為單位切圖而無(wú)從下手的童鞋。核心是根據(jù)屏幕動(dòng)態(tài)改變根元素字體大小，以達(dá)到適配各種屏幕。不過(guò)對(duì)于快速做手機(jī)端切圖很有幫助。

1.文章很久沒(méi)更新，里面的東西可能并不適用現(xiàn)在的大環(huán)境，配套代碼太老舊也只是個(gè)參考，不要直接用到生產(chǎn)上。  
2.用vw做自適應(yīng)單位也是一種流行的做法

簡(jiǎn)介：
本篇適用于初次使用rem為單位切圖而無(wú)從下手的童鞋。核心是根據(jù)屏幕動(dòng)態(tài)改變根元素字體大小，以達(dá)到適配各種屏幕。這只是一個(gè)拿來(lái)就用的教程。很多東西沒(méi)有詳細(xì)說(shuō)明。不過(guò)對(duì)于快速做手機(jī)端切圖很有幫助。

模板：Github

使用：
1.下載完成后首先修改js文件中的基本單位：psd寬度是640就寫(xiě)640，是750就寫(xiě)750.現(xiàn)在的設(shè)計(jì)稿大部分是以iphone 6 為基準(zhǔn)設(shè)計(jì)的，也就是750px。

2.切圖時(shí)，我們以100px為基本單位（至于為什么是100px，自己看看我的js代碼就知道了），每個(gè)元素的寬高，字體等等就直接用rem來(lái)寫(xiě)，不用執(zhí)行減半等操作，設(shè)計(jì)稿是多少就寫(xiě)多少。下面是一張750px的設(shè)計(jì)稿

圖中那個(gè)690px*336PX元素css樣式如下：

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

因?yàn)槲覀冇昧藙?dòng)態(tài)改變根字體大小，所以.box會(huì)自動(dòng)適應(yīng)各種屏幕。現(xiàn)在我們就可以愉快的切圖了。
使用方法就這么簡(jiǎn)單。其中最重要的就是那段js代碼。。后面的文字，想看的就看看吧。

   3.這句是廢話，如果你夠牛逼就可以直接用px來(lái)寫(xiě)各個(gè)元素的寬高，字體等等，之后直接用sass或者less轉(zhuǎn)換成rem就行了。

4.調(diào)試時(shí)記得把瀏覽器默認(rèn)最小字體設(shè)置為最小。手機(jī)端是支持12px以下的字體的。

5.對(duì)于不是750px的設(shè)計(jì)稿，我們其實(shí)是可以將其等比縮放到750px的


說(shuō)明：

一、頭部加入最常用的meta內(nèi)容

width viewport的寬度
initial-scale 初始化縮放比例
minimum-scale 最小縮放比例
maxinum-scale 最大縮放比例
user-scalable 用戶(hù)是否可以縮放
minimal-ui ios7以上隱藏瀏覽器導(dǎo)航欄
具體關(guān)于viewport的說(shuō)明請(qǐng)看慕課網(wǎng)

二、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動(dòng)態(tài)設(shè)置html字體過(guò)大時(shí)，他的line-height對(duì)子孫元素的不良影響，請(qǐng)自行體會(huì)。
重要三、引入動(dòng)態(tài)改變根節(jié)點(diǎn)字體大小的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布局的核心代碼，這段代碼的大意是：

如果頁(yè)面的寬度超過(guò)了750px，那么頁(yè)面中html的font-size恒為100px，否則，頁(yè)面中html的font-size的大小為： 100 * (當(dāng)前頁(yè)面寬度 / 750)。
我們剛開(kāi)始切圖時(shí)，如果在手機(jī)端使用固定寬高px，那么我們的寬高都要減半，以上圖的設(shè)計(jì)稿為例，使用固定px時(shí)的代碼：

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

使用rem時(shí)的代碼：

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

對(duì)應(yīng)公式，我們的iPhone 6 是375px寬度，所以此時(shí)的字體為50px。自己算一算是不是和減半的效果一樣。

我們?cè)谇袌D時(shí)，自己根據(jù)設(shè)計(jì)稿設(shè)置是640px寬度或者750px寬度或者其他的
四、移動(dòng)端還有好多解決體驗(yàn)性問(wèn)題的東西?？梢钥纯催@個(gè)