響應式佈局淺析

時間 2020-01-05

標籤響應佈局淺析简体版

原文原文鏈接

所謂響應式佈局，就是頁面會根據當前運行的設備的大小自行進行調整，實現方案主要有如下三種：css

1）隱藏html

例如在 PC 端的一些友情連接或者不重要的內容在移動端能夠選擇隱藏起來。web

2）換行瀏覽器

在 PC 端顯示一行的內容，因爲移動端設備寬度比較小，因此能夠選擇顯示爲幾行。iphone

3）自適應空間佈局

例如，左邊元素給定一個具體的值，右邊元素的寬度令其根據不一樣的設備寬度自行調整。字體

具體的實現方法主要有如下幾種：flex

1）remcode

rem 是一個相對單位，通常 1rem = html設置的 font-size 的值。htm

關於 rem 的詳細介紹能夠參考移動 web 開發適配祕籍 Rem 這個免費課程。

經過設置不一樣設備 html 的 font-size 改變 rem 的值，令 1rem 單位的值隨着設備的增大而增大。

2）viewport

設置 <meta name="viewport" content="width=device-width, initial-scale=1.0" > ，關於這個下面會介紹。

3）media query

判斷當前是什麼設備，而後根據不一樣的設備設置不一樣的樣式。

接下來先說一下 viewport 這個 meta 標籤。

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

爲何要讓可視區域的寬度等於設備的寬度

viewport 指的是可視區域(說白了就是展現頁面的區域，通常狀況下固然是設備的屏幕多大就讓展現頁面的區域是多大，若是屏幕的寬度是 320px，不設置可視區域的大小爲 320px，將一個 960px 的頁面(假設PC端頁面是960px這麼大)硬生生地展現在 320px 屏幕上，只能將頁面總體縮小爲原來的 1/3 去展現，那用戶看起來頁面上的字就過小了。

若是將可視區域的寬度調整爲設備屏幕的寬度，這樣會PC端 960px 的頁面會在 320px 寬度的設備上從新佈局，例如以前在 PC 端要展現在一行的內容，在移動端因爲寬度只有 320px 一行確定展現不下了，因此就會進行換行。通過這樣佈局顯示出來的字體大小和 PC 端是同樣的，用戶體驗就會比較好。

因此咱們須要將可視區域的寬度設置爲設備的寬度，接下來會有代碼進行驗證。

對於下面的代碼

<style>
    .container{
      margin:0 auto;
      max-width:800px;
      display: flex;
      border:1px solid black;
    }
    .left{
      display: flex;
      width: 200px;
      background:red;
      margin:5px;
    }
    .right{
      display: flex;
      flex: 1;
      background:blue;
      margin:5px;
    }

  </style>
</head>
<body>
<div class="container">
  <div class="left">
    這裏是一些不重要的內容，好比友情連接、廣告
  </div>
  <div class="right">
    這裏是一些重要的內容，好比一篇文章，文章是整個頁面的核心內容。這裏是一些重要的內容，好比一篇文章，文章是整個頁面的核心內容。這裏是一些重要的內容，好比一篇文章，文章是整個頁面的核心內容。這裏是一些重要的內容，好比一篇文章，文章是整個頁面的核心內容。這裏是一些重要的內容，好比一篇文章，文章是整個頁面的核心內容。這裏是一些重要的內容，好比一篇文章，文章是整個頁面的核心內容。這裏是一些重要的內容，好比一篇文章，文章是整個頁面的核心內容。這裏是一些重要的內容，好比一篇文章，文章是整個頁面的核心內容。這裏是一些重要的內容，好比一篇文章，文章是整個頁面的核心內容。這裏是一些重要的內容，好比一篇文章，文章是整個頁面的核心內容。
  </div>
</div>
</body>

若是不加 <meta name="viewport" content="width=device-width, initial-scale=1.0" >，在PC 端的頁面以下

在 iPhonex上的頁面

很明顯，在移動端上並無進行適配只是進行了等比例縮放，致使字體很小，用戶體驗差。

這個時候再加上 <meta name="viewport" content="width=device-width initial-scale=1.0">，在移動端的頁面以下所示

可見並非進行總體縮放，而是根據設備的寬度經過換行等方式進行了適配，這個時候的字體和PC端的字體大小也差很少，用戶體驗好。

經過 <meta name="viewport" content="width=device-width initial-scale=1.0"> 這條語句來進行移動端適配在一些比較簡單的狀況，對移動端適配要求比較低的狀況下是能夠的，可是若是想要進行更好的移動端適配還要採用一些其餘的措施，例如媒體查詢等。

上圖中，紅色的部分實際上在移動端能夠不用顯示的，由於它並非重要的內容，這個時候就能夠採用媒體查詢的方式當設備的寬度小於某個值以後就隱藏左邊紅色的區域。

能夠在上面的 css 代碼中添加媒體查詢，當設備的寬度小於 640px 時就隱藏左邊的紅色區域。

@media (max-width: 640px){
 .left{
   display: none;
 }
}

在 iphonex 的顯示狀況以下圖所示：

再來看一個案例：

HTML 代碼：

<div class="container">
  <div class="intro">
    介紹1
  </div>
  <div class="intro">
    介紹2
  </div>
  <div class="intro">
    介紹3
  </div>
  <div class="intro">
    介紹4
  </div>
</div>

CSS 代碼

.container{
  margin:0 auto;
  max-width:800px;
  border:1px solid black;
}
.intro{
  display: inline-block;
  width:180px;
  height:180px;
  line-height: 180px;
  text-align: center;
  border-radius: 90px;
  border:1px solid red;
  margin:7px;
}

在 PC 端頁面顯示以下：

不加 <meta name="viewport" content="width=device-width initial-scale=1.0"> 時移動端頁面以下：

會發現頁面只是在 pc 端的基礎上進行了等比例縮放，如今加上 meta 標籤，

能夠看到添加meta標籤後會自動根據設備的寬度進行適配，iphone 5 的寬度爲 320px，圓圈的寬度爲 182px， margin-left 爲 7px，再加上右邊還有 7px 的 margin-right，因此加起來一共佔了 196px，因此還剩下 124px，因此第二個圓圈只能排在第二行。

如今有個問題是靠左邊太多了，咱們想讓它在移動端時能夠居中，因此利用媒體查詢，加上下面的 css 代碼。

@media (max-width: 640px) {
  .intro {
    margin: 7px auto;
    display: block;
  }
}

注意這個地方必須加上 display: block，不加以前是 inline-block，在 inline-block 條件下 auto 是不會起效果的，左右沒有 margin 值。

block 元素是會佔據一行的，因此 auto 能夠居中，向 inline-block 並不會單獨佔一行，它的寬度是有限的，談不上 auto。

加上上面的媒體查詢以後，當設備寬度小於 640px 時就會圓圈就會居中顯示。

如今還有一個問題是因爲圓圈的數值是經過 px 單位寫死的，因此不管設備的大小如何改變，圓圈的大小是不會改變的，隨着設備寬度（小於640px）的變化，圓圈的大小始終是不會變化的。

這樣隨着設備寬度的增長，圓圈就顯得比較小了，那麼有沒有什麼方法可使得隨着設備寬度的增長，圓圈也能夠隨着增長呢？

能夠的，經過 rem 就能夠實現。

rem 是一種根據 html 的 font-size 改變更態修改值的相對單位。

咱們能夠經過設置媒體查詢，設置幾個設備寬度下不一樣的 html 的 font-size ，這樣當設備寬度變大時，1 rem 的值也隨着變大，這樣就能夠實現圓圈跟着變大了。

這裏假設 1rem = 20px

將 css 代碼中的 px 變爲 rem

.container{
  margin:0 auto;
  max-width:800px;
  border:1px solid black;
}
.intro{
  display: inline-block;
  width:9rem;
  height:9rem;
  line-height: 9rem;
  text-align: center;
  border-radius: 4.5rem;
  border:1px solid red;
  margin:.3rem;
}
@media (max-width: 375px){
  html{
    font-size:24px;
  }
}
@media (max-width: 320px){
  html{
    font-size:20px;
  }
}
@media (max-width: 640px) {
  .intro {
    margin: .3rem auto;
    display: block;
  }
}

注意 @media (max-width: 375px) 必定要寫在 @media (max-width: 320px) 的前面，不然將會一直應用 @media (max-width: 375px) 的樣式，例如設備的寬度爲 220px，這個時候兩個都知足，可是因爲@media (max-width: 375px) 在後面因此它設置的樣式會覆蓋前面的樣式。

設置完後，當設備寬度爲 375 時 html 的 font-size爲 24px，此時 1rem = 24px（以前 1rem = 20px）因此圓圈會被放大一些。

經過上圖能夠看到，圓圈的大小變成了 218*218，再也不是以前的 182*182。

注意使用 rem 時有時計算出來的像素是不精準的，例如上例中我想令 .intro 元素的高度爲 175 px，因爲 1 rem = 24 px，因此須要設置

height = 7.2916666666666666666666666666667rem 在實際應用通常不會取小數點後那麼多位，假設這裏取 height = 7.3 rem 因此 height 應該爲 7.3 * 24 = 175.2，可是在瀏覽器中 height 倒是 177.19 減去上下的邊框等於 175.19 並不等於 175.2，因此會有一點誤差。

因此，在對像素精度要求很高的地方，使用 rem 時要格外謹慎。

完，若有不恰當之處歡迎指正哦。