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

設(shè)置 Viewport

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

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

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

媒體查詢

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

如何選擇屏幕大小分割點(diǎn)

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

選擇600px,900px,1200px,1800px作為分割點(diǎn)、480px,800px,1400px,1400px

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

移動(dòng)優(yōu)先 OR PC優(yōu)先

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

百分比布局

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

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

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

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

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

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

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

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

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

rem布局

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

rem布局思想

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

rem布局缺點(diǎn)

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

/*上述代碼中將視圖容器分為10份，font-size用十分之一的寬度來表示，最后在header標(biāo)簽中執(zhí)行這段代碼，就可以動(dòng)態(tài)定義font-size的大小，從而1rem在不同的視覺容器中表示不同的大小，用rem固定單位可以實(shí)現(xiàn)不同容器內(nèi)布局的自適應(yīng)。*/
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布局也是目前多屏幕適配的最佳方式。默認(rèn)情況下我們html標(biāo)簽的font-size為16px,我們利用媒體查詢，設(shè)置在不同設(shè)備下的字體大小。

/* 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中引入了一個(gè)新的單位vw/vh，與視圖窗口有關(guān)，vw表示相對(duì)于視圖窗口的寬度，vh表示相對(duì)于視圖窗口高度，除了vw和vh外，還有vmin和vmax兩個(gè)相關(guān)的單位。各個(gè)單位具體的含義如下：

視口單位

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

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

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

視口單位來實(shí)現(xiàn)響應(yīng)式

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

//iPhone 6尺寸作為設(shè)計(jì)稿基準(zhǔn)
$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實(shí)現(xiàn)

.mod_grid {
    position: relative;
    &::after {
        // 實(shí)現(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%;
        }
    }
    ...
}

對(duì)于需要保持寬高比的圖，應(yīng)該用padding-top實(shí)現(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適配后的頁面效果很好，但是它是利用視口單位實(shí)現(xiàn)的布局，依賴視口大小而自動(dòng)縮放，無論視口過大還是過小，它也隨著時(shí)候過大或者過小，失去了最大最小寬度的限制，此時(shí)我們可以結(jié)合rem來實(shí)現(xiàn)布局

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

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

圖片響應(yīng)式

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

使用max-width（圖片自適應(yīng)）

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

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

使用srcset

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

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

使用background-image

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

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

使用picture標(biāo)簽

<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標(biāo)簽，否則無法顯示，對(duì)picture的操作最后都是在img上面，例如onload事件是在img標(biāo)簽觸發(fā)的，picture和source是不會(huì)進(jìn)行l(wèi)ayout的，它們的寬和高都是0。

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

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

總結(jié)

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

響應(yīng)式布局的成型方案

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

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

響應(yīng)式布局的要點(diǎn)

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

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

參考

前端響應(yīng)式布局原理與方案（詳細(xì)版）