實現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式。通過響應式設計能使網(wǎng)站在手機和平板電腦上有更好的瀏覽閱讀體驗。

設置 Viewport

手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，通常這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每個網(wǎng)頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優(yōu)化的網(wǎng)頁的布局），用戶可以通過平移和縮放來看網(wǎng)頁的不同部分。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width：控制 viewport 的大小，可以指定的一個值，如 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
• height：和 width 相對應，指定高度。
• initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
• maximum-scale：允許用戶縮放到的最大比例。
• minimum-scale：允許用戶縮放到的最小比例。
• user-scalable：用戶是否可以手動縮放。

媒體查詢

CSS3媒體查詢可以讓我們針對不同的媒體類型定義不同的樣式，當重置瀏覽器窗口大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。

如何選擇屏幕大小分割點

如何確定媒體查詢的分割點也是一個開發(fā)中會遇到的問題，

選擇600px,900px,1200px,1800px作為分割點、480px,800px,1400px,1400px

上面的分割方案不一定滿足項目中的實際需求，我們可以先用跨度大的分割點進行分割，如果出現(xiàn)不適配的情況可以再根據(jù)實際情況增加新的分割點。

移動優(yōu)先 OR PC優(yōu)先

不管是移動優(yōu)先還是PC優(yōu)先，都是依據(jù)當隨著屏幕寬度增大或減小的時候，后面的樣式會覆蓋前面的樣式。因此，移動端優(yōu)先首先使用的是min-width，PC端優(yōu)先使用的max-width。

百分比布局

通過百分比單位，可以使得瀏覽器中組件的寬和高隨著瀏覽器的高度的變化而變化，從而實現(xiàn)響應式的效果。Bootstrap里面的柵格系統(tǒng)就是利用百分比來定義元素的寬高，CSS3支持最大最小高，可以將百分比和max(min)一起結(jié)合使用來定義元素在不同設備下的寬高。

子元素的height或width中使用百分比，是相對于子元素的直接父元素，width相對于父元素的width，height相對于父元素的height。

子元素的top和bottom如果設置百分比，則相對于直接非static定位(默認定位)的父元素的高度，同樣子元素的left和right如果設置百分比，則相對于直接非static定位(默認定位的)父元素的寬度。

子元素的padding如果設置百分比，不論是垂直方向或者是水平方向，都相對于直接父親元素的width，而與父元素的height無關。

跟padding一樣，margin也是如此，子元素的margin如果設置成百分比，不論是垂直方向還是水平方向，都相對于直接父元素的width。

border-radius不一樣，如果設置border-radius為百分比，則是相對于自身的寬度，除了border-radius外，還有比如translate、background-size等都是相對于自身的；

從上述對于百分比單位的介紹我們很容易看出如果全部使用百分比單位來實現(xiàn)響應式的布局，有明顯的以下兩個缺點：

計算困難，如果我們要定義一個元素的寬度和高度，按照設計稿，必須換算成百分比單位。

各個屬性中如果使用百分比，相對父元素的屬性并不是唯一的。比如width和height相對于父元素的width和height，而margin、padding不管垂直還是水平方向都相對比父元素的寬度、border-radius則是相對于元素自身等等，造成我們使用百分比單位容易使布局問題變得復雜。

rem布局

REM是CSS3新增的單位，并且移動端的支持度很高，Android2.x+,ios5+都支持。rem單位都是相對于根元素html的font-size來決定大小的,根元素的font-size相當于提供了一個基準，當頁面的size發(fā)生變化時，只需要改變font-size的值，那么以rem為固定單位的元素的大小也會發(fā)生響應的變化。 因此，如果通過rem來實現(xiàn)響應式的布局，只需要根據(jù)視圖容器的大小，動態(tài)的改變font-size即可（而em是相對于父元素的）。

rem布局思想

• 一般不要給元素設置具體的寬度，但是對于一些小圖標可以設定具體寬度值
• 高度值可以設置固定值，設計稿有多大，我們就嚴格有多大
• 所有設置的固定值都用rem做單位（首先在HTML總設置一個基準值：px和rem的對應比例，然后在效果圖上獲取px值，布局的時候轉(zhuǎn)化為rem值)
• js獲取真實屏幕的寬度，讓其除以設計稿的寬度，算出比例，把之前的基準值按照比例進行重新的設定，這樣項目就可以在移動端自適應了

rem布局缺點

在響應式布局中，必須通過js來動態(tài)控制根元素font-size的大小，也就是說css樣式和js代碼有一定的耦合性，且必須將改變font-size的代碼放在css樣式之前

/*上述代碼中將視圖容器分為10份，font-size用十分之一的寬度來表示，最后在header標簽中執(zhí)行這段代碼，就可以動態(tài)定義font-size的大小，從而1rem在不同的視覺容器中表示不同的大小，用rem固定單位可以實現(xiàn)不同容器內(nèi)布局的自適應。*/
function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);

REM布局也是目前多屏幕適配的最佳方式。默認情況下我們html標簽的font-size為16px,我們利用媒體查詢，設置在不同設備下的字體大小。

/* pc width > 1100px */
html{ font-size: 100%;}
body {
    background-color: yellow;
    font-size: 1.5rem;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
      background-color: #FF00FF;
      font-size: 1.4rem;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
      background-color: green;
      font-size: 1.3rem;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
      background-color: blue;
      font-size: 1.25rem;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
      font-size: 1.125rem;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
      background-color: #0FF000;
      font-size: 1rem;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
      background-color: #0FF000;
      font-size: 0.75rem;
    }
}

視口單位

css3中引入了一個新的單位vw/vh，與視圖窗口有關，vw表示相對于視圖窗口的寬度，vh表示相對于視圖窗口高度，除了vw和vh外，還有vmin和vmax兩個相關的單位。各個單位具體的含義如下：

視口單位

用視口單位度量，視口寬度為100vw，高度為100vh（左側(cè)為豎屏情況，右側(cè)為橫屏情況）。例如，在桌面端瀏覽器視口尺寸為650px，那么 1vw = 650 * 1% = 6.5px（這是理論推算的出，如果瀏覽器不支持0.5px，那么實際渲染結(jié)果可能是7px）。

那么vw或者vh很類似百分比單位。vw和%的區(qū)別為：

從對比中我們可以發(fā)現(xiàn)，vw單位與百分比類似，單確有區(qū)別，前面我們介紹了百分比單位的換算困難，這里的vw更像"理想的百分比單位"。任意層級元素，在使用vw單位的情況下，1vw都等于視圖寬度的百分之一。

視口單位來實現(xiàn)響應式

1.僅使用vw作為CSS單位
對于設計稿的尺寸轉(zhuǎn)換為為單位，我們使用Sass函數(shù)編譯

//iPhone 6尺寸作為設計稿基準
$vm_base: 375; 
@function vw($px) {
    @return ($px / 375) * 100vw;
}

無論是文本還是布局寬度、間距等都使用vw作為單位

.mod_nav {
    background-color: #fff;
    &_list {
        display: flex;
        padding: vm(15) vm(10) vm(10); // 內(nèi)間距
        &_item {
            flex: 1;
            text-align: center;
            font-size: vm(10); // 字體大小
            &_logo {
                display: block;
                margin: 0 auto;
                width: vm(40); // 寬度
                height: vm(40); // 高度
                img {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
            &_name {
                margin-top: vm(2);
            }
        }
    }
}

物理像素線（也就是普通屏幕下1px,高清屏幕下0.5px的情況）采用transform屬性scale實現(xiàn)

.mod_grid {
    position: relative;
    &::after {
        // 實現(xiàn)1物理像素的下邊框線
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #ddd;
        height: 1px;
        left: 0;
        right: 0;
        top: 0;
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin: 50% 0%;
        }
    }
    ...
}

對于需要保持寬高比的圖，應該用padding-top實現(xiàn)

.mod_banner {
    position: relative;
    padding-top: percentage(100/700); // 使用padding-top
    height: 0;
    overflow: hidden;
    img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0; 
    }
}

2. 搭配vw和rem
雖然采用vw適配后的頁面效果很好，但是它是利用視口單位實現(xiàn)的布局，依賴視口大小而自動縮放，無論視口過大還是過小，它也隨著時候過大或者過小，失去了最大最小寬度的限制，此時我們可以結(jié)合rem來實現(xiàn)布局

• 給根元素大小設置隨著視口變化而變化的vw單位，這樣就可以實現(xiàn)動態(tài)改變其大小
• 限制根元素字體大小的最大最小值，配合body加上最大寬度和最小寬度

// rem 單位換算：定為 75px 只是方便運算，750px-75px、640-64px、1080px-108px，如此類推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基準值
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 單位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 
    // 同時，通過Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小寬度限制，避免默認100%寬度的 block 元素跟隨 body 而過大過小
body {
    max-width: 540px;
    min-width: 320px;
}

圖片響應式

這里的圖片響應式包括兩個方面，一個就是大小自適應，這樣能夠保證圖片在不同的屏幕分辨率下出現(xiàn)壓縮、拉伸的情況；一個就是根據(jù)不同的屏幕分辨率和設備像素比來盡可能選擇高分辨率的圖片，也就是當在小屏幕上不需要高清圖或大圖，這樣我們用小圖代替，就可以減少網(wǎng)絡帶寬了。

使用max-width（圖片自適應）

圖片自適應意思就是圖片能隨著容器的大小進行縮放，可以采用如下代碼：
img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

inline-block 元素相對于它周圍的內(nèi)容以內(nèi)聯(lián)形式呈現(xiàn)，但與內(nèi)聯(lián)不同的是，這種情況下我們可以設置寬度和高度。 max-width保證了圖片能夠隨著容器的進行等寬擴充（即保證所有圖片最大顯示為其自身的 100%。此時，如果包含圖片的元素比圖片固有寬度小，圖片會縮放占滿最大可用空間），而height為auto可以保證圖片進行等比縮放而不至于失真。如果是背景圖片的話要靈活運用background-size屬性。
那么為什么不能用width：100%呢？因為這條規(guī)則會導致它顯示得跟它的容器一樣寬。在容器比圖片寬得多的情況下，圖片會被無謂地拉伸。

使用srcset

<img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt="">

復制代碼如果屏幕的dpi = 1的話則加載1倍圖，而dpi = 2則加載2倍圖，手機和mac基本上dpi都達到了2以上，這樣子對于普通屏幕來說不會浪費流量，而對于視網(wǎng)膜屏來說又有高清的體驗。
如果瀏覽器不支持srcset，則默認加載src里面的圖片。
但是你會發(fā)現(xiàn)實際情況并不是如此，在Mac上的Chrome它會同時加載srcset里面的那張2x的，還會再去加載src里面的那張，加載兩張圖片。順序是先把所有srcset里面的加載完了，再去加載src的。這個策略比較奇怪，它居然會加載兩張圖片，如果不寫src，則不會加載兩張，但是兼容性就沒那么好。這個可能是因為瀏覽器認為，既然有srcset就不用寫src了，如果寫了src，用戶可能是有用的。而使用picture就不會加載兩張

使用background-image

.banner{
  background-image: url(/static/large.jpg);
}

@media screen and (max-width: 767px){
  background-image: url(/static/small.jpg);
}

使用picture標簽

<picture>
    <source srcset="banner_w1000.jpg" media="(min-width: 801px)">
    <source srcset="banner_w800.jpg" media="(max-width: 800px)">
    <img src="banner_w800.jpg" alt="">
</picture>

<!-- picturefill.min.js 解決IE等瀏覽器不支持 <picture> 的問題 -->
<script type="text/javascript" src="js/vendor/picturefill.min.js"></script>

picture必須要寫img標簽，否則無法顯示，對picture的操作最后都是在img上面，例如onload事件是在img標簽觸發(fā)的，picture和source是不會進行l(wèi)ayout的，它們的寬和高都是0。

另外使用source，還可以對圖片格式做一些兼容處理：

<picture>
    <source type="image/webp" srcset="banner.webp">
    <img src="banner.jpg" alt="">
</picture>

總結(jié)

響應式布局的實現(xiàn)可以通過媒體查詢+px,媒體查詢+百分比，媒體查詢+rem+js,vm/vh,vm/vh +rem這幾種方式來實現(xiàn)。但每一種方式都是有缺點的，媒體查詢需要選取主流設備寬度尺寸作為斷點針對性寫額外的樣式進行適配，但這樣做會比較麻煩，只能在選取的幾個主流設備尺寸下呈現(xiàn)完美適配，另外用戶體驗也不友好，布局在響應斷點范圍內(nèi)的分辨率下維持不變，而在響應斷點切換的瞬間，布局帶來斷層式的切換變化，如同卡帶的唱機般“咔咔咔”地一下又一下。通過百分比來適配首先是計算麻煩，第二各個屬性中如果使用百分比，其相對的元素的屬性并不是唯一的，這樣就造成我們使用百分比單位容易使布局問題變得復雜。通過采用rem單位的動態(tài)計算的彈性布局，則是需要在頭部內(nèi)嵌一段腳本來進行監(jiān)聽分辨率的變化來動態(tài)改變根元素字體大小，使得CSS與JS 耦合了在一起。通過利用純css視口單位實現(xiàn)適配的頁面，是既能解決響應式斷層問題，又能解決腳本依賴的問題的，但是兼容性還沒有完全能結(jié)構(gòu)接受。

響應式布局的成型方案

現(xiàn)在的css，UI框架等都已經(jīng)考慮到了適配不同屏幕分辨率的問題，實際項目中我們可以直接使用這些新特性和框架來實現(xiàn)響應式布局?？梢杂幸韵逻x擇方案：

• 利用上面的方法自己來實現(xiàn)，比如CSS3 Media Query,rem，vw等
• Flex彈性布局，兼容性較差
• Grid網(wǎng)格布局，兼容性較差
• Columns柵格系統(tǒng)，往往需要依賴某個UI庫，如Bootstrap

響應式布局的要點

在實際項目中，我們可能需要綜合上面的方案，比如用rem來做字體的適配，用srcset來做圖片的響應式，寬度可以用rem，flex，柵格系統(tǒng)等來實現(xiàn)響應式，然后可能還需要利用媒體查詢來作為響應式布局的基礎，因此綜合上面的實現(xiàn)方案，項目中實現(xiàn)響應式布局需要注意下面幾點：

• 設置viewport
• 媒體查詢
• 字體的適配（字體單位）
• 百分比布局
• 圖片的適配（圖片的響應式）
• 結(jié)合flex，grid，BFC，柵格系統(tǒng)等已經(jīng)成型的方案

參考

前端響應式布局原理與方案（詳細版）