前端響應式布局為什麼是個坑？

2021 年 8 月 26 日
筆記
html5

一、什麼是響應式布局？

響應式設計：Responseive design，就是一個網站，一套程式碼能在所有終端能夠正常展示，並不是為每個終端做一個特定版本，響應式是為解決移動互聯網瀏覽器而誕生的。

二、響應式設計步驟

2.1、viewport 設置

大多數移動端瀏覽器都將html頁面的寬度作為可視區的視圖以符合螢幕解析度，所以我們需要利用 meta 設置 viewport ，將網頁寬度設為設備寬度。

在head中添加meta標籤，設置設備的寬度作為視圖大小，禁止縮放。程式碼如下：

<meta 
 name="viewport" 
 content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" 
/>

2.2、媒體查詢

媒體查詢：Media Queries，是響應式布局的核心，瀏覽器會根據條件選擇需要渲染的html和css內容。多種螢幕設備的寬度主要分為四個區間。

超小螢幕
手機 (<768px)

小螢幕
平板 (≥768px)

中等螢幕
桌面顯示器 (≥992px)

大螢幕
大桌面顯示器 (≥1200px)

媒體查詢有兩種引入方式：內部引入和外部引入。

2.2.1、內部引入

/* 手機端樣式 */
@media screen and (max-width:768){}

/* ipad終端樣式 */
@media screen and (min-width:768px) and ( max-width:992px ){}

/*筆記型電腦樣式*/
@media screen and (min-width:992px) and (max-width:1200px){}

/* 台式機大屏 */
@media screen and (min-width:1200px){}

2.2.2、外部引入

/* 手機端樣式 */
<link  rel="stylesheet" media="screen and (max-width:768px)" />

/* ipad終端樣式 */
<link  rel="stylesheet" media="screen and (min-width:768px) and ( max-width:992px )" />

/*筆記型電腦樣式*/
<link  rel="stylesheet" media="screen and (min-width:992px) and (max-width:1200px)" />

/* 台式機大屏 */
<link  rel="stylesheet" media="screen and (min-width:1200px)" />

注意：

使用媒體查詢的時候，要把公共樣式放到最前邊，媒體查詢程式碼放到最後。
寫媒體查詢的時候要按照螢幕從小到大的設置。
外層包裹的元素寬度處理要使用百分比。
圖片縮放處理的時候容易失真，所以嘗試給圖片添加最大最小的寬度。

三、響應式布局實例

eg：製作一個展示圖片的列表，大屏展示一行4張圖片，ipad一行展示3張圖片，手機一行展示兩張圖片。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  .list{
   width:100%;
   max-width:1200px;
   padding:0;
   margin:0 auto;
  }
  .pic{
   float:left;
   list-style:none;
   box-sizing: border-box;
   padding:10px;
   margin:15px 0px;
  }
  .picture{
   width:100%;
   height:100px;
   background:#eaeaea;
  }
  @media screen and (max-width:768px) {
   .pic{
    width:50%;
    }
  }
  @media screen and (min-width:768px) and (max-width:992px) {
   .pic{
    width:33%;
   }
  }
  @media screen and (min-width:992px) {
   .pic{
    width:25%;
   }
  }
 </style>
</head>
<body>
 <ul class="list">
  <li class="pic"><div class="picture"></div></li>
  <li class="pic"><div class="picture"></div></li>
  <li class="pic"><div class="picture"></div></li>
  <li class="pic"><div class="picture"></div></li>
  <li class="pic"><div class="picture"></div></li>
  <li class="pic"><div class="picture"></div></li>
  <li class="pic"><div class="picture"></div></li>
  <li class="pic"><div class="picture"></div></li>
  <li class="pic"><div class="picture"></div></li>
  <li class="pic"><div class="picture"></div></li>
  <li class="pic"><div class="picture"></div></li>
  <li class="pic"><div class="picture"></div></li>
 </ul>
</body>
</html>

運行以後不斷改變瀏覽器的寬度，圖片元素布局會自動改變。

bootstrap框架用的就是媒體查詢原理，我們做響應式布局的時候，基本都會借用bootstrap框架提高工作效率。

四、響應式優缺點

4.1、優點：

面對不同解析度設備靈活性強。
能夠快捷解決多設備顯示的適應問題。

4.2、缺點：

響應式網站無法區分移動端，所以會出現隱藏部分無用內容，浪費寬度，載入耗時長。響應式布局使用移動端窄屏時，隱藏內容依然會載入，低解析度載入高品質圖片或影片，不同螢幕尺寸都提供相同的網頁，載入內容多，浪費流量，速度慢，容易造成用戶流失。
兼容所有終端，工作量大，效率低下。
僅適用布局、資訊、框架並不複雜的部門類型網站。
響應式對於低版本IE瀏覽器簡直是悲劇。響應式里運用了很多html5新特性，而這些特性只要高級瀏覽器才支援，所以在IE6、7、8幾乎是看不了的。
響應式設計不利於百度關鍵詞優化和排名。用戶在不同終端搜索習慣不同，百度對移動端和PC端的關鍵詞處理策略也不同，百度搜索排名也是有PC和移動端之分的，所以如果要做優化，不建議響應式布局。

建議你的網站最好分別製作移動端和PC端，這樣網站性能、用戶體驗、用戶留存相對來說會好很多。大公司它們的網站都是獨立的，很少使用響應式布局。

Tags: html5