移動端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、移動端還有好多解決體驗性問題的東西。能夠看看這個