響應式方案調研及前端開發管理思考

浩瀚動酷發表於2018-06-27
前端

 網易首頁響應式風格實現技術調研

網易首頁實現頁面（字型）響應式風格的方式是在不同尺寸的視口中使用不同的容器類，如圖 1所示。當視口大於等於1420px時，使用大尺寸容器類 （index2017_1200_wrap，width: 1200px），當視口小於 1420px時，使用小尺寸容器類（index2017_960_wrap，width: 960px）。容器類的切換依賴於JavaScript 監聽，如圖 2所示，並未使用CSS3的媒介查詢。

網易首頁在發生視口改變時，如果引起了字型和佈局的響應式變化，則頁面會有所卡頓。

響應式方案調研及前端開發管理思考響應式方案調研及前端開發管理思考響應式方案調研及前端開發管理思考響應式方案調研及前端開發管理思考響應式方案調研及前端開發管理思考響應式方案調研及前端開發管理思考

                                             圖 1 網易首頁所使用的容器類


響應式方案調研及前端開發管理思考響應式方案調研及前端開發管理思考

                                          圖 2 網易首頁用於監聽視口變化的程式碼

 CSS3之rem相容性調研

使用rem作為單位時的瀏覽器相容如圖 3所示。需要注意的是，IE9 / IE10 不支援font屬性簡寫時使用rem指定字型大小，IE9 / IE1 / IE11不支援偽元素的line-height屬性使用rem作為單位。

響應式方案調研及前端開發管理思考

測試程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    html{
      font-size: 20px;
    }
    .bigger{
      font-size: 2rem;
    }
    .biggest{
      font-size: 4rem;
    }
    .font-shorthand{
      font: italic bold 5rem/1.2 Arial, sans-serif;
    }
    .padding-shorthand{
      border: 1px red solid;
      margin: 3rem;
      padding: 5rem;
    }
    .pseudo-class{
      line-height: 6rem;
    }
    .pseudo-class:hover{
      cursor: pointer;
      font-size: 5rem;
    }
    .pseudo-element:after{
      content: '這是偽元素元素';
      line-height: 20rem;
      font-size: 5rem;
    }
  </style>
</head>
<body>
  <div>原生字型</div>
  <div class="bigger">較大字型</div>
  <div class="biggest">最大字型</div>
  <div class="font-shorthand">font簡寫</div>
  <div class="padding-shorthand">margin 和 padding 簡寫</div>
  <div class="pseudo-class">偽類</div>
  <div class="pseudo-element">偽元素</div>
</body>
</html>
複製程式碼

網站技術方案改造

改造已有專案 VS 搬遷到新專案

  改造已有專案的優勢： 

   1.開發內容歸屬明確。 
   2.部署結構無需變化。

 改造已有專案的不足：

      1.歷史負擔較大。
      2.需要新增一套前端公共資源，引起程式碼冗餘，增加維護成本。 

 採用新專案開發的優勢： 

      1.歷史負擔小。 
      2.可是使用新框架進行開發、釋出，流程更加可控。 
      3.可以避免setting.js的選擇載入，提高載入效率。

 採用新專案開發的不足： 

     1.新專案的歸屬問題有待商榷。 
     2.專案過多可能增加管理工作量。
     3.系統部署更加複雜。

響應式風格的實現

方案一：rem + 媒體查詢 方案 （推薦）

方案描述：使用媒體查詢設定特定視口尺寸下根元素的字型大小，使用rem為單位設定具有響應式風格的元素的屬性，使用less的混入功能實現低階瀏覽器降級的需求。

優勢：響應速度快，程式碼量小，應對未知變化（比如視口大小的劃分從兩檔變為三檔）的能強，增加pc端使用rem的團隊經驗。

不足：必須採用IE8對應的降級策略，可能有未知的坑。

方案二：固定class + 媒體查詢 方案

方案描述：使用媒體查詢，在特定的視口寬度下為特定的公共樣式適用特定的字型大小、行高等屬性，使用css3-mediaqueries-js等方案處理IE8的相容問題。

優勢：響應速度較快，基本相容IE8，雖然需要兩套樣式可公共樣式程式碼量小，應對未知變化（比如視口大小的劃分從兩檔變為三檔）的能較強。

不足：需要做響應式風格的元素需要包含特定的公共樣式名（類名），增加了程式碼量和維護工作量。

方案三：可變容器方案 網易目前使用

方案描述：在不同的容器下定義兩套樣式，使用JavaScript監聽視口尺寸變化，當視口尺寸的變化達到臨界值時，變換頂級容器。

優勢：完全相容IE8

不足：需要兩套樣式，維護工作量較大，視口大小判斷不夠準確，對於視口變化的響應不及時，頁面在響應縮放時會略有卡頓，應對未知變化（比如視口大小的劃分從兩檔變為三檔）的能力差。

分屏載入

對於內容較多，特別是圖片較多的頁面，使用分屏載入技術，避免出現首頁初始化時大量載入靜態資源，導致響應緩慢的問題。

關於前端開發管理的思考

在開發工作進行前和進行中是否考慮加入技術評審環節應當加強文件管理，包括專案的版本記錄，專案所使用到的資源（靜態資源、模組、公共類等）記錄等。  


相關文章