摘要：說(shuō)到響應(yīng)式布局方案，我們首先需要了解視口這個(gè)概念視口在早期的時(shí)候我們沒(méi)有專門(mén)針對(duì)手機(jī)尺寸寫(xiě)的頁(yè)面，所以在用手機(jī)瀏覽頁(yè)面的時(shí)候我們看到的都是專門(mén)針對(duì)端的頁(yè)面，在這種情況下頁(yè)面會(huì)被嚴(yán)重壓縮，而且會(huì)極大的影響頁(yè)面的結(jié)構(gòu)和布局，為了解決這個(gè)問(wèn)題，蘋(píng)

說(shuō)到響應(yīng)式布局方案，我們首先需要了解視口這個(gè)概念

在早期的時(shí)候我們沒(méi)有專門(mén)針對(duì)手機(jī)尺寸寫(xiě)的頁(yè)面，所以在用手機(jī)瀏覽頁(yè)面的時(shí)候我們看到的都是專門(mén)針對(duì)PC端的頁(yè)面，在這種情況下頁(yè)面會(huì)被嚴(yán)重壓縮，而且會(huì)極大的影響頁(yè)面的結(jié)構(gòu)和布局，為了解決這個(gè) 問(wèn)題，蘋(píng)果公司提出了視口的概念，因?yàn)槲覀冊(cè)缙诘腜C端的頁(yè)面的版心一般是960px，為了容納這個(gè)頁(yè)面，我們?cè)谑謾C(jī)建立一個(gè)虛擬的區(qū)域，大小一般為980px，來(lái)容納PC的頁(yè)面，以方便用戶來(lái)瀏覽頁(yè)面

但是在如今移動(dòng)端快速發(fā)展的時(shí)候，我們有了專門(mén)針對(duì)手機(jī)屏幕尺寸的的移動(dòng)端頁(yè)面，所以在寫(xiě)移動(dòng)端的頁(yè)面的時(shí)候我們需要調(diào)整視口的寬度，保證頁(yè)面內(nèi)容會(huì)在手機(jī)屏幕尺寸大小的頁(yè)面上進(jìn)行展示

媒體查詢可以為不同的設(shè)備規(guī)定不同的樣式，常用的一般有三種設(shè)備 screen（計(jì)算機(jī)屏幕,該值是默認(rèn)值）、print（打印預(yù)覽）、all（所有設(shè)備）

@media screen

媒體屬性用來(lái)規(guī)定在指定的符合某些條件的情況下為指定的元素設(shè)置樣式，需要注意媒體屬性必須用()包起來(lái)，否則無(wú)效，常用的媒體屬性有

width    可視區(qū)域?qū)挾龋≈蹈袷綖橹付▽挾然蛘叻秶? @media (width: 900px){ }
height    可視區(qū)域高度，取值格式為指定寬度或者范圍，如  @media (max-height: 900px){ }
device-width    設(shè)備寬度，取值格式為指定寬度或者范圍，如  @media (max-device-width: 5000px) { }
device-height    設(shè)備高度 取值格式為指定寬度或者范圍，如  @media (max-device-height: 5000px) { }
orientation    設(shè)備是豎屏還是橫屏模式，可選值有l(wèi)andscape（橫屏）、portrait（豎屏），如 @media (orientation: landscape) { }
aspect-ratio    可視區(qū)域?qū)捀弑龋≈蹈袷綖樗较袼?垂直像素，如@media (device-aspect-ratio:16/9) { }
device-aspect-ratio    設(shè)備寬高比，取值格式為水平像素/垂直像素，如@media (device-aspect-ratio:16/9) { }

例如我們要針對(duì)某個(gè)設(shè)備的body在橫屏?xí)r設(shè)置的背景顏色是黑色，在豎屏的時(shí)候背景是白色，那么可以使用以下寫(xiě)法

html, body {
    height: 100%;
    }
@media  (orientation: landscape) {
    body{
        background-color:#000;
    }
}
@media  (orientation: portrait) {
    body{
        background-color:#fff;
    }
}

媒體查詢可以使用三種操作符，通過(guò)操作符配合媒體屬性來(lái)判斷是否載入媒體屬性下的樣式表

and 將每一個(gè)條件組合起來(lái)，只有當(dāng)所有條件都成立時(shí)條件才成立，可以理解為JavaScript中的&

not 對(duì)媒體查詢的條件取反

or 只要有一個(gè)媒體屬性條件成立就成立，可以理解為JavaScript中的||

配合邏輯操作符設(shè)置設(shè)備在可視窗口大小變化時(shí)背景顏色發(fā)生改變

html,body{
    height: 100%;
}
    
@media screen and (max-width: 500px ){
    body{
        background-color: skyblue;
    }
}
@media screen and (min-width: 501px) and (max-width: 800px){
    body{
        background-color: #ccc;
    }
}
@media screen and (min-width: 900px){
    body{
        background-color: yellowgreen;
    }
}

在CSS3規(guī)范中引入了vw、vh單位，分別將視口劃分為100份，一個(gè)vw單位相當(dāng)于視口寬度的1%，一個(gè)vh相當(dāng)于視口高度的1%，需要注意的是不同于百分比的布局方案，vw和vh不受父元素寬高的影響，只由視口的大小決定
同時(shí)還有兩個(gè)單位vmax、vmin,vmax表示取視口寬度和高度中比較大的值，將其等分為100份，vmin表示取比較小的值，將其等分為100份

目前瀏覽器的支持情況

rem是css中的一個(gè)單位，是根據(jù)根字體大小來(lái)設(shè)定的，也就是html的font-size

在正常的UI設(shè)計(jì)稿件的時(shí)候一般設(shè)置大小為640/750px大小，我們一般選擇將稿件等分為20份（20份在設(shè)備大小和稿件大小一般可以除盡，我們盡量避免出現(xiàn)小數(shù)）

那么如果UI稿件為640px大小，每一份的大小為32px，假設(shè)UI稿件上有一個(gè)160*160大小的元素，那么該元素占整個(gè)頁(yè)面的160/32份

同時(shí)我們也將屏幕分為20份，以Iphon為例（屏幕大小為320px），那么每份大小為16px，我們通過(guò)媒體查詢將html根字體大小設(shè)置為16px，那么在UI稿件上160px大小的元素在Iphon5上的實(shí)際大小為160/32 rem，那么通過(guò)這個(gè)公式我們就可以通過(guò)JavaScript設(shè)置不同的根節(jié)點(diǎn)字體大小來(lái)進(jìn)行適配

我們來(lái)寫(xiě)一個(gè)簡(jiǎn)單的例子

(function (doc, win) {
       var docEl = doc.documentElement,
/*
          document.documentElement
          返回文檔的根節(jié)點(diǎn)
        * orientationchange 在用戶移動(dòng)端設(shè)備屏幕垂直或水平旋轉(zhuǎn)移動(dòng)設(shè)備時(shí)被觸發(fā)
        * resize 事件，在綁定元素大小發(fā)生變化時(shí)觸發(fā)該事件，例如檢測(cè)屏幕變化：
        * window.addEventLisenter("resize",function(){
        *      alert("屏幕大小變化了")
        * })
        *
        * resize 屬性，css3新增屬性，用來(lái)指定用戶是否可以縮放該元素
        * none:用戶無(wú)法調(diào)整該元素尺寸
        * both：用戶可以調(diào)整元素的高度和寬度
        * horizontal：用戶可調(diào)整元素的寬度
        * vertical:用戶可調(diào)整元素的寬度
        * */
           resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
           recalc = function () {
               var clientWidth = docEl.clientWidth;
               if (clientWidth >= 640) {
                   clientWidth = 640
               }
               if (!clientWidth) return;

               docEl.body.style.fontSize = (clientWidth / 640) * 100 + "px";
           };
       win.addEventListener("resizeEvt", recalc, false);
/*
         * DOMContentLoaded 該事件會(huì)在load事件之前觸發(fā)，在DOM樹(shù)構(gòu)建完成時(shí)就觸發(fā)
         * 而load事件則是在DOMContentLoaded事件觸發(fā)之后，繼續(xù)加載圖片等外部文件完成后觸發(fā)
         * */
       doc.addEventListener("DOMContentLoaded", recalc, false)
   })(document, window)

之前一直在使用手淘的rem布局方案，可以大概看一下源碼

;(function(win, lib) {
        var doc = win.document;
        var docEl = doc.documentElement;
        var metaEl = doc.querySelector("meta[name="viewport"]");
        var flexibleEl = doc.querySelector("meta[name="flexible"]");
        var dpr = 0;
        var scale = 0;
        var tid;

        var flexible = lib.flexible || (lib.flexible = {});

        if (metaEl) {

            var match = metaEl.getAttribute("content").match(/initial-scale=([d.]+)/);


        }if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
        else if (flexibleEl) {
            var content = flexibleEl.getAttribute("content");
            if (content) {
                var initialDpr = content.match(/initial-dpr=([d.]+)/);
                var maximumDpr = content.match(/maximum-dpr=([d.]+)/);
                if (initialDpr) {
                    dpr = parseFloat(initialDpr[1]);
                    scale = parseFloat((1 / dpr).toFixed(2));
                }
                if (maximumDpr) {
                    dpr = parseFloat(maximumDpr[1]);
                    scale = parseFloat((1 / dpr).toFixed(2));
                }
            }
        }
        //如果用戶自定了name="viewport"的meat標(biāo)簽，那么通過(guò)match獲取用戶設(shè)置的initial-scale，也就是縮放級(jí)別，然后獲得設(shè)置dpr
        //如果用戶沒(méi)有設(shè)定name="viewport"的meat標(biāo)簽，那么獲取flexible.js自身定義的縮放級(jí)別來(lái)設(shè)置dpr


        if (!dpr && !scale) {
            //檢測(cè)的當(dāng)前設(shè)備的版本
            var isAndroid = win.navigator.appVersion.match(/android/gi);
            var isIPhone = win.navigator.appVersion.match(/iphone/gi);

            var devicePixelRatio = win.devicePixelRatio;
            //window.devicePixelRatio 該屬性返回當(dāng)前顯示設(shè)備的物理像素分辨率與css像素分辨率的比值
            //可以通過(guò)重寫(xiě)window.devicePixelRatio來(lái)更改此屬性，例如window.devicePixelRatio=2;

            if (isIPhone) {
                // iOS下，對(duì)于2和3的屏，用2倍的方案，其余的用1倍方案
                if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                    dpr = 3;
                } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                    dpr = 2;
                } else {
                    dpr = 1;
                }
            } else {
                // 其他設(shè)備下，仍舊使用1倍的方案
                dpr = 1;
            }
            scale = 1 / dpr;
        }

        docEl.setAttribute("data-dpr", dpr);
        //判斷頁(yè)面是否存在 metaEl
        if (!metaEl) {
            metaEl = doc.createElement("meta");
            metaEl.setAttribute("name", "viewport");
            metaEl.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");
            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(metaEl);
            } else {
                var wrap = doc.createElement("div");
                wrap.appendChild(metaEl);
                doc.write(wrap.innerHTML);
            }
        }

        function refreshRem(){
            var width = docEl.getBoundingClientRect().width;
            //getBoundingClientRect
            //返回一個(gè)DOMRect對(duì)象，包含一組矩形的集合，該集合內(nèi)是與該元素相關(guān)的css邊框集合

            // DOMRect
            // bottom:8
            // height:8
            // left:0
            // right:520
            // top:0
            // width:520
            // x:0
            // y:0

            if (width / dpr > 540) {
                width = 540 * dpr;
            }
            //手淘的布局方案默認(rèn)將屏幕分成十份，當(dāng)然，如果愿意我們可以對(duì)其進(jìn)行更改
            var rem = width / 10;
            docEl.style.fontSize = rem + "px";
            flexible.rem = win.rem = rem;
        }
        // resize 在設(shè)備寬度發(fā)生改變時(shí)觸發(fā)
        win.addEventListener("resize", function() {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }, false);
        //pageshow firefox/open的一個(gè)事件，在chrome中不會(huì)觸發(fā)
        //在頁(yè)面后退時(shí)靜態(tài)資源會(huì)直接重緩存中讀取
        win.addEventListener("pageshow", function(e) {
            if (e.persisted) {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);
        //document.readyState 描述文檔的加載狀態(tài)

        // loding 文檔仍然在加載中
        // interactive 文檔已經(jīng)加載完成并已經(jīng)被解析，但是圖像，框架之類的資源仍然在加載中
        // complete 說(shuō)有資源都已經(jīng)加載完成，load事件即將被觸發(fā)
        // 在狀態(tài)改變時(shí)document.readyState事件將被觸發(fā)

        if (doc.readyState === "complete") {
            doc.body.style.fontSize = 12 * dpr + "px";
        } else {
            //DOMContentLoaded 在文檔加載完成后觸發(fā)，不會(huì)等待圖像，框架等資源，參考$(function(){}) / $.ready()
            doc.addEventListener("DOMContentLoaded", function(e) {
                doc.body.style.fontSize = 12 * dpr + "px";
            }, false);
        }


        refreshRem();

        flexible.dpr = win.dpr = dpr;
        flexible.refreshRem = refreshRem;
        //rem 2 px  轉(zhuǎn)化方法
        flexible.rem2px = function(d) {
            var val = parseFloat(d) * this.rem;
            if (typeof d === "string" && d.match(/rem$/)) {
                val += "px";
            }
            return val;
        }
        //px 2 rem  轉(zhuǎn)化方法
        flexible.px2rem = function(d) {
            var val = parseFloat(d) / this.rem;
            if (typeof d === "string" && d.match(/px$/)) {
                val += "rem";
            }
            return val;
        }

    })(window, window["lib"] || (window["lib"] = {}));

手淘的布局方法主要是通過(guò)dpr來(lái)設(shè)置不同屏幕下的不同比例關(guān)系，drp指的是默認(rèn)縮放為100%的情況下設(shè)備像素和CSS像素的比值

dpr=設(shè)備像素 / CSS像素

具體的關(guān)于dpr的解釋可以看下面這篇文章

移動(dòng)web開(kāi)發(fā)之像素和DPR

如果使用手淘的布局方案注意一個(gè)問(wèn)題，我們需要去除頁(yè)面中設(shè)置了name=viewport的meta標(biāo)簽，在源碼中我們可以看到如果存在改標(biāo)簽，那么lib-flexible不會(huì)動(dòng)態(tài)改變縮放比例