Are you sure you understand the responsive layout？

劉源泉發表於2019-02-16

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

檢視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 <length> yes 定義輸出裝置中的頁面可見區域寬度
height <length> yes 定義輸出裝置中的頁面可見區域高度
device-width <length> yes 定義輸出裝置的螢幕可見寬度
device-height <length> yes 定義輸出裝置的螢幕可見高度
orientation portrait,landscape no height是否大於width
aspect-ratio <ratio> yes width和height的比率
device-aspect-ratio <ratio> yes device-width和device-height的比率
resolution <resolution> yes 定義裝置的解析度
-webkit-device-pixel-ratio <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

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

<img alt=`微信` src=`https://user-gold-cdn.xitu.io…;h=1280&f=webp&s=39482` width=`200` />

<img alt=`支付寶` src=`https://user-gold-cdn.xitu.io…;h=1350&f=webp&s=45674` width=`200`/>

相關文章