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

前端人發表於2021-08-26
前端

一、什麼是響應式佈局？

響應式設計：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端，這樣網站效能、使用者體驗、使用者留存相對來說會好很多。大公司它們的網站都是獨立的，很少使用響應式佈局。

相關文章