如何實現自適應頁面 (響應式布局)

當我們在做網頁時，應當充分考慮到網頁自適應的問題

否則可能會出現同一個網頁在不同的屏幕尺寸上排版布局混亂的情況

方案一：用比例控制大小

1. 在網頁代碼的頭部，加入一行viewport元標簽

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

   • 以下是相關的屬性的解釋：
     1. width：控制 viewport 的大小，可以指定的一個值，如 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）
     2. height：和 width 相對應，指定高度
     3. initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例，1.0就是占網頁的100%
     4. maximum-scale：允許用戶縮放到的最大比例
     5. minimum-scale：允許用戶縮放到的最小比例
     6. user-scalable：用戶是否可以手動縮放

2. 用百分比去寫元素的寬度，不要寫絕對寬度

   .myDiv {
       width: 30%;
   }
   

   • 這里需要注意div寬度的計算方法，CSS盒式模型的寬度設置有兩種模式：
     1. width = 內容寬度
        • 實際總寬度 = width + padding + border
        • 這種情況下設置了 width 后，內容寬度不變，而調整 padding 和 border 都會使得div的實際總寬度變化
     2. width = 實際總寬度
        • width = 內容寬度 + padding + border
        • 這種情況下設置了 width 后，div總寬度不變
   • 可以通過設置 css 的 box-sizing 屬性來控制
     • content-box：width = 內容寬度 (默認)
     • border-box：width = 實際總寬度

3. 讓子元素撐起父元素的高度，而不要寫絕對高度

   .parent {
       width: 30%;
   }
   .child {
       width:100%;
       height:100px;
   }
   

4. **字體使用相對大小 "em" 或 "rem" **

   h1 {
       font-size: 2rem;
   }
   

   • 瀏覽器默認字體為 16px ，2rem 即 2 * 16px = 32px
   • em（font size of the element）是指相對於父元素的字體大小的單位，如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸，因此 em 的大小並不是固定的
   • rem（font size of the root element）是指相對於根元素的字體大小的單位

     • 目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。

       h1 {
           font-size: 32px;
           font-size: 2rem;
       }
       

5. 圖片的大小也用百分比表示

   img {
       width: 100%;
   }
   

   • 也可以設置 max-width ，這樣一來圖片最大不會超過原始尺寸，避免圖片由於放大而模糊

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

方案二：使用媒體查詢 (CSS3 @media 查詢)

當網頁需要在移動端和PC端展示時，由於二者屏幕尺寸差別較大，可能需要用兩種不同的布局才能更加友好地展示內容
此時可以使用媒體查詢來檢測屏幕(或瀏覽器窗口)的大小，然后采用相應的css樣式來渲染頁面

• 舉個例子,當瀏覽器窗口小於 500px 時，背景變為藍色：

  @media only screen and (max-width: 500px) {
      body {
          background-color: lightblue;
      }
  }