搭建一個H5頁面，我們需要在head中新增一個meta標籤

快捷鍵：meta:vp + tab鍵

    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

viewport：視口

width=device - width 設定視口的寬度等於裝置的寬度，如果不設定的話，預設視口寬度為980px。通俗的理解：我們這個操作其實就是告訴當前的瀏覽器按照多少寬度來渲染頁面，換句話說，就是展示當前這個頁面的區域一共有多寬（瀏覽器的寬度）

user-scalable=no 禁止使用者手動縮放

initial-scale=1.0 設定螢幕預設的縮放比例

maximum-scale=1.0 設定螢幕最大的縮放比例

minimum-scale=2.0 設定螢幕最小的縮放比例

/*正常普通屏*/
        .box {
            background: url("ban.jpg") no-repeat;
        }

        /*2倍屏*/
        @media all and (-webkit-device-pixel-ratio: 2) {
            .box {
                background: url("
 
[email protected]") no-repeat;
            }
        }

        /*3倍屏*/
        @media all and (-webkit-device-pixel-ratio: 3) {
            .box {
                background: url("[email protected]") no-repeat;
            }
        }

媒體查詢：@media

->媒體裝置：all所有裝置  screen所有螢幕裝置PC+移動端 print印表機裝置...

->媒體條件：指定在 什麼樣的條件下執行對應的樣式

        @media all and (max-width: 319px) {
            /*寬度小於320px*/
            .box {
                height: 110px;
            }
        }

        @media all and (min-width: 320px) and (max-width: 359px) {
            /*寬度大於等於320px小於360px*/
            .box {
                height: 120px;
            }
        }

蘋果手機的尺寸：5s以下都是320px  6是375px寬度 6plus是414px

常用的安卓機尺寸：320， 360， 480， 540， (640， 720...)

在真實專案中，設計師給我們的設計稿一般都是640*1136  /  640*960  /   750*1334

響應式佈局的解決方案：

①流式佈局法：

->一般是用在PC端和手機端共用一套前端頁面

->容器的寬度一般都不寫固定的值，而是使用百分比（相對於視口區域寬度的百分比）

->其餘的樣式：字型，高度，margin，padding等等都按照設計稿上標註尺寸的一半來設定

->對於有些螢幕尺寸下，我們設定的固定值看起來不是特別好看的話，使用@media進行微調整

特殊情況：

設計師的設計稿是640px的，我們的素材圖也是640px，這樣iPhone6以及6plus展示的時候，圖片不夠大，對於這種情況就和UI設計師要1280px大圖

        @media all and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) {
            .box {
                background: url("[email protected]") no-repeat;
            }
        }

        @media all and (min-width: 641px) {
            .box {
                background: url("[email protected]") no-repeat;
            }
        }

②REM響應式佈局

->我們做的H5頁面只在移動端訪問（REM不相容低版本的瀏覽器）

->REM：當前頁面中元素的REM單位的樣式值都是針對於HTML元素的font-size的值進行動態計算的

->  html{

font-size: 100px;   //1REM = 100px

}

Width: 2rem; 這樣就是相當於width=200px

Height:2rem;

按照平時如果想要讓頁面中的所有比例所有一半，就需要修改所有的單位為px的值，而採用rem的話，只需要改變font-size: 50px;

這樣就代表1REM = 50px，所以

Width: 2rem; 這樣就是相當於width=100px

Height:2rem;

步驟：

①從UI設計師拿到設計稿（PSD格式的設計稿）640*1136

②在樣式中給HTML設定一個font-size的值，我們一般都設定一個方便後面計算的值，例如：10px，100px...這裡我們之所以用100px，主要是瀏覽器最小的字型大小都是12px，用10px比例計算的結果和真實UI設計稿會存在那麼一點點的偏差

html{

font-size: 100px;   //1REM = 100px

}

③寫頁面，寫樣式

完全按照設計稿的尺寸來寫樣式，此時不用管任何的事情，設計稿給你的高度，寬度，字型大小，margin，padding的值是多少，我們就寫多少

但是我們在寫樣式值的時候，需要把得到的畫素值除以100，計算出對應的rem的值，我們設定的也都是rem的值

值得注意的是：真實專案中外層盒子的寬度我們一般還是不寫固定值，沿用流式佈局法的思想，我們用百分比的方式佈局

④根據當前螢幕的寬度和設計稿的寬度來計算我們HTML的font-size

設計稿   640   600*300                      font-size=100             6rem*3rem

手機：   320    300*150                     font-size=50               6rem*3rem

手機：   375  351.5625*175.78125    font-size=58.59375    6rem*3rem

根據當前的螢幕寬度和設計稿寬度的比例，動態計算一下當前寬度下的fontsize值應該是多少，如果fontsize的值改變了，之前設定的所有rem單位的值自動會跟著放大或者縮小

~function () {
    var desW = 640,
        winW = document.documentElement.clientWidth,
        ratio = winW / desW,
        oMain = document.querySelector(".main");
    if (winW > desW) {
        oMain.style.margin = "0 auto";
        oMain.style.width = desW + 'px';
        return;
    }
    document.documentElement.style.fontSize = ratio * 100 + 'px';
}();