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

時間 2019-11-29

標籤響應方案調研前端開發管理思考欄目興趣愛好简体版

原文原文鏈接

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

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

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

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

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

CSS3之rem兼容性調研

使用rem做爲單位時的瀏覽器兼容如圖 3所示。須要注意的是，IE9 / IE10 不支持font屬性簡寫時使用rem指定字體大小，IE9 / IE1 / IE11不支持僞元素的line-height屬性使用rem做爲單位。瀏覽器

測試代碼以下：bash

<!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 搬遷到新項目
框架

改造已有項目的優點： less

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

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

分屏加載

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

關於前端開發管理的思考

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

相關文章

相關標籤/搜索

前端開發-EasyUI

Web 前端開發

web前端開發

前端vue開發

PHP參考手冊

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<