摘要：我們推薦使用作為字體單位默認情況下我們標簽的為，我們可以利用媒體查詢，設置在不同設備下的字體大小百分比布局用過的同學都知道，它里面有個柵格系統，說白了就是利用百分比來定義我們元素寬高，而不直接使用。

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

查看demo

查看源碼，歡迎star

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

我用過幾款響應式布局框架，自己也研究過響應式布局的原理，我認為真正的響應式布局應該是：

我們的網站使用一套代碼，兼容多個終端設備，在不同的設備上會做出不同的調整，如顯示或者隱藏等

點我體驗

當你想要實現一個響應式布局，你需要注意以下幾點

我們所做的第一件事就是設置viewport，添加如下代碼到你的head標簽中

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

媒體查詢是響應式布局的核心，我們的網頁為什么能夠根據窗口的大小自動調整樣式都是依靠媒體查詢

@media all {} // 用于所有設備
@media print {} // 用于打印機
@media screen {} // 用于PC，Pad，Phone

媒體特性有以下可選項

移動優先就是我們寫的樣式以移動端為主，當隨著屏幕寬度增大的時候，后面的樣式會覆蓋前面的樣式，請看下面：

/* 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優先與移動端優先正好相反，我們編寫的樣式以PC端為主，然后隨著屏幕的寬度的減小，后面的樣式會覆蓋前面的樣式，請看下面：

/* 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;
    }
}

大家注意到沒有PC端優先使用的是max-width，而移動端優先使用的是min-width，這個技巧大家有沒get到

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

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

/* 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;
    }
}

圖片自適應意思就是圖片能隨著容器的大小進行縮放，可以采用如下代碼：

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

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

如果是背景圖片的話要靈活運用background-size屬性

除此之外還要靈活運用flex布局，grid布局，絕對布局，BFC等

再總結下，實現一個響應式布局我們要注意以下幾點：

viewport

媒體查詢

字體單位

百分比布局

圖片自適應

flex，grid，BFC，絕對布局等常用技巧

查看demo

查看源碼，歡迎star

你們的打賞是我寫作的動力