[TOC] ## 概述 ## 分片率  ### JQuery 2006年1月John Resig等人創建了jQuery；8月，jQuery的第一個穩定版本。jQuery是DOM操作時代前端框架最優秀，也幾乎是唯一代表；但是在以React為代表的新式前端框架崛起之后，迅速沒落。 * JQuery 1.x兼容IE6+瀏覽器 * JQuery 2.x兼容IE9+瀏覽器 * JQuery 3.x兼容IE9+瀏覽器 ### Bootstrap Bootstrap原名Twitter Blueprint，由Mark Otto和Jacob Thornton開發，最經典的響應式CSS框架，在2011年8月19日作為開源項目發布。其核心是16列布局柵格系統，使用媒體查詢設定閾值為超小屏幕，小屏幕，中等屏幕，大屏幕，超大屏幕創建不同的樣式。 * Bootstrap 2兼容IE7+瀏覽器 * Bootstrap 3兼容IE8+瀏覽器 * Bootstrap 4兼容IE10+瀏覽器 * Bootstrap 5不兼容IE瀏覽器 ### 瀏覽器兼容框架 ### 1、normalize.css 讓不同的瀏覽器在渲染網頁元素的時候形式更統一。 ### 2、html5shiv.js IE6~IE8識別HTML5標簽，并且可以添加CSS樣式。 ### 3、respond.js 使IE6~IE8瀏覽器支持媒體查詢。 ## 兼容策略 ### 瀏覽器兼容策略 國內XP用戶還有3.29%，XP用戶既升級不了IE9，也無法安裝新版本Chrome和Firefox 。而IE用戶還有 5.65%，考慮到Windows用戶為87%，所以IE9+的份額應該要少于5.65%-3.29%*87%=2.79%。 也就是說IE8以下的用戶要多于IE8以上的用戶。所以支持單獨支持IE9+ 瀏覽器沒有實際意義，要么支持IE6，要么不支持IE， ### 屏幕分辨率兼容策略 屏幕分辨率最少要考慮兼容便攜屏幕和移動屏幕兩種。 可以參考去哪兒網的做法 把內容分成三類： 1. 移動端主菜單與導航欄； 2. 主要內容； 3. 擴展內容。 屏幕分辨率高于480，顯示主要內容、擴展內容。 屏幕分辨率低于480，顯示移動端主菜單與導航欄、主要內容。 ### 跨平臺兼容策略 大型網站，手機網站與桌面網站是不同的入口，因此不存在兼容，是兩個單獨的應用程序