摘要：我們推薦使用作為字體單位默認(rèn)情況下我們標(biāo)簽的為，我們可以利用媒體查詢，設(shè)置在不同設(shè)備下的字體大小百分比布局用過的同學(xué)都知道，它里面有個(gè)柵格系統(tǒng)，說白了就是利用百分比來定義我們?cè)貙捀撸恢苯邮褂谩?/p>

曾幾何時(shí)我認(rèn)為使用了媒體查詢就是響應(yīng)式布局，這種理解實(shí)在是太淺薄了，今天就讓我們重新來認(rèn)識(shí)下什么是響應(yīng)式布局

查看demo

查看源碼，歡迎star

前幾年風(fēng)靡一時(shí)Bootstrap就是很典型的響應(yīng)式布局框架，雖然現(xiàn)在已經(jīng)被淘汰了，但是現(xiàn)在流行的一些UI框架都是借鑒Bootstrap的思想來實(shí)現(xiàn)了響應(yīng)式布局，如Ant Design，Material Design等，可以說Bootstrap開啟了響應(yīng)式布局的時(shí)代

我用過幾款響應(yīng)式布局框架，自己也研究過響應(yīng)式布局的原理，我認(rèn)為真正的響應(yīng)式布局應(yīng)該是：

我們的網(wǎng)站使用一套代碼，兼容多個(gè)終端設(shè)備，在不同的設(shè)備上會(huì)做出不同的調(diào)整，如顯示或者隱藏等

點(diǎn)我體驗(yàn)

當(dāng)你想要實(shí)現(xiàn)一個(gè)響應(yīng)式布局，你需要注意以下幾點(diǎn)

我們所做的第一件事就是設(shè)置viewport，添加如下代碼到你的head標(biāo)簽中

上面這段代碼的作用是設(shè)置我們網(wǎng)頁的寬度為設(shè)備的寬度，初始化縮放為1，并且禁止用戶縮放

媒體查詢是響應(yīng)式布局的核心，我們的網(wǎng)頁為什么能夠根據(jù)窗口的大小自動(dòng)調(diào)整樣式都是依靠媒體查詢

@media all {} // 用于所有設(shè)備
@media print {} // 用于打印機(jī)
@media screen {} // 用于PC，Pad，Phone

媒體特性有以下可選項(xiàng)

移動(dòng)優(yōu)先就是我們寫的樣式以移動(dòng)端為主，當(dāng)隨著屏幕寬度增大的時(shí)候，后面的樣式會(huì)覆蓋前面的樣式，請(qǐng)看下面：

/* iphone6 7 8 */
body {
    background-color: yellow;
}
/* iphone 5 */
@media screen and (max-width: 320px) {
    body {
      background-color: red;
    }
}
/* iphoneX */
@media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
    }
}
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    body {
      background-color: blue;
    }
}
/* ipad */
@media screen and (min-width: 768px) {
    body {
      background-color: green;
    }
}
/* ipad pro */
@media screen and (min-width: 1024px) {
    body {
      background-color: #FF00FF;
    }
}
/* pc */
@media screen and (min-width: 1100px) {
    body {
      background-color: black;
    }
}

PC優(yōu)先與移動(dòng)端優(yōu)先正好相反，我們編寫的樣式以PC端為主，然后隨著屏幕的寬度的減小，后面的樣式會(huì)覆蓋前面的樣式，請(qǐng)看下面：

/* pc width > 1024px */
    body {
        background-color: yellow;
    }
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
        background-color: #FF00FF;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
        background-color: green;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
        background-color: blue;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
        background-color: #0FF000;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
        background-color: #0FF000;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
        background-color: #0FF000;
    }
}

大家注意到?jīng)]有PC端優(yōu)先使用的是max-width，而移動(dòng)端優(yōu)先使用的是min-width，這個(gè)技巧大家有沒get到

由于我們要做響應(yīng)式布局，我們的字體大小也要隨著屏幕的大小進(jìn)行改變，這時(shí)候就不能使用px作為字體單位了，我們可以使用em或者rem，這兩者的區(qū)別是一個(gè)是相對(duì)于父元素，一個(gè)是相對(duì)于html標(biāo)簽。我們推薦使用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;
    }
}

用過Bootstrap的同學(xué)都知道，它里面有個(gè)柵格系統(tǒng)，說白了就是利用百分比來定義我們?cè)貙捀?，而不直接使用width。css3支持了最大最小寬高，可以將百分比和max(min)一起結(jié)合使用來定義元素在不同設(shè)備下的寬高

/* pc width > 1100px */
html, body { margin: 0;padding: 0;width: 100%;height: 100%;}
aside {
    width: 10%;
    height: 100%;
    background-color: red;
    float: left;
}
main {
    height: 100%;
    background-color: blue;
    overflow: hidden;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    aside {
      width: 8%;
      background-color: yellow;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    aside {
      float: none;
      width: 100%;
      height: 10%;
      background-color: green;
    }
    main {
      height: calc(100vh - 10%);
      background-color: red;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    aside {
      float: none;
      width: 100%;
      height: 5%;
      background-color: yellow;
    }
    main {
      height: calc(100vh - 5%);
      background-color: red;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    aside {
      float: none;
      width: 100%;
      height: 10%;
      background-color: blue;
    }
    main {
      height: calc(100vh - 10%);
      background-color: red;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    aside {
      float: none;
      width: 100%;
      height: 3%;
      background-color: black;
    }
    main {
      height: calc(100vh - 3%);
      background-color: red;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    aside {
      float: none;
      width: 100%;
      height: 7%;
      background-color: green;
    }
    main {
      height: calc(100vh - 7%);
      background-color: red;
    }
}

圖片自適應(yīng)意思就是圖片能隨著容器的大小進(jìn)行縮放，可以采用如下代碼：

img {
    max-width: 100%;
    height: auto;
}

max-width保證了圖片能夠隨著容器的進(jìn)行等寬擴(kuò)充，而height為auto可以保證圖片進(jìn)行等比縮放而不至于失真

如果是背景圖片的話要靈活運(yùn)用background-size屬性

除此之外還要靈活運(yùn)用flex布局，grid布局，絕對(duì)布局，BFC等

再總結(jié)下，實(shí)現(xiàn)一個(gè)響應(yīng)式布局我們要注意以下幾點(diǎn)：

viewport

媒體查詢

字體單位

百分比布局

圖片自適應(yīng)

flex，grid，BFC，絕對(duì)布局等常用技巧

查看demo

查看源碼，歡迎star

你們的打賞是我寫作的動(dòng)力