你真的瞭解響應式佈局嗎？

曾幾什麼時候我認爲使用了媒體查詢就是響應式佈局，這種理解實在是太淺薄了，今天就讓咱們從新來認識下什麼是響應式佈局

查看demo

查看源碼，歡迎star

什麼是響應式佈局

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

我用過幾款響應式佈局框架，本身也研究過響應式佈局的原理，我認爲真正的響應式佈局應該是：

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

點我體驗

響應式佈局的要點

當你想要實現一個響應式佈局，你須要注意如下幾點

設置viewport

咱們所作的第一件事就是設置viewport，添加以下代碼到你的head標籤中

<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no'>
複製代碼

上面這段代碼的做用是設置咱們網頁的寬度爲設備的寬度，初始化縮放爲1，而且禁止用戶縮放

媒體查詢

媒體查詢是響應式佈局的核心，咱們的網頁爲何可以根據窗口的大小自動調整樣式都是依靠媒體查詢

媒體類型

@media all {} // 用於全部設備
@media print {} // 用於打印機
@media screen {} // 用於PC，Pad，Phone
複製代碼

媒體特性

媒體特性有如下可選項

媒體特性	取值	接受max或min	描述
width		yes	定義輸出設備中的頁面可見區域寬度
height		yes	定義輸出設備中的頁面可見區域高度
device-width		yes	定義輸出設備的屏幕可見寬度
device-height		yes	定義輸出設備的屏幕可見高度
orientation	portrait,landscape	no	height是否大於width
aspect-ratio		yes	width和height的比率
device-aspect-ratio		yes	device-width和device-height的比率
resolution		yes	定義設備的分辨率
-webkit-device-pixel-ratio		yes	設備像素比

移動優先

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

/* 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端爲主，而後隨着屏幕的寬度的減少，後面的樣式會覆蓋前面的樣式，請看下面：

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

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

最後

再總結下，實現一個響應式佈局咱們要注意如下幾點：

• viewport
• 媒體查詢
• 字體單位
• 百分比佈局
• 圖片自適應
• flex，grid，BFC，絕對佈局等經常使用技巧

查看demo

查看源碼，歡迎star

大家的打賞是我寫做的動力