响应式方案调研及前端开发管理思考
?網易首頁響應式風格實現技術調研
網易首頁實現頁面（字體）響應式風格的方式是在不同尺寸的視口中使用不同的容器類，如圖 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
不足：需要兩套樣式，維護工作量較大，視口大小判斷不夠準確，對于視口變化的響應不及時，頁面在響應縮放時會略有卡頓，應對未知變化（比如視口大小的劃分從兩檔變為三檔）的能力差。
分屏加載
對于內容較多，特別是圖片較多的頁面，使用分屏加載技術，避免出現首頁初始化時大量加載靜態資源，導致響應緩慢的問題。
關于前端開發管理的思考
在開發工作進行前和進行中是否考慮加入技術評審環節應當加強文檔管理，包括項目的版本記錄，項目所使用到的資源（靜態資源、模塊、公共類等）記錄等。 ?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的响应式方案调研及前端开发管理思考的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 记HTML5 a 标签的一个小坑
- 下一篇： 前端通过spark-md5.js计算本地