二、理解淘寶、網易適配做法

網易的做法整理： 設計稿是基於iphone4或者iphone5來的,橫向解析度為640px,這時取一個100px的font-size為參照，那麼body元素的寬度就可以設定為width: 6.4rem，於是html的font-size=deviceWidth / 6.4。deviceWidth就是viewport設定中的那個deviceWidth（通過document.documentElement.clientWidth可以取到），當我們DOM準備好後，第一件做的事情就是：document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';（6.4是根據設計稿的橫向解析度/100得來的）,具體分以下步驟： 1、先拿設計稿豎著的橫向解析度除以100得到body元素的寬度： 如果設計稿基於iphone6，橫向解析度為750，body的width為750 / 100 = 7.5rem如果設計稿基於iphone4/5，橫向解析度為640，body的width為640 / 100 = 6.4rem 2、佈局時，設計圖標註的尺寸除以100得到css中的尺寸 3、在dom ready以後，通過以下程式碼設定html的font-size: document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4（如果是750的設計稿，應該除以7.5） + 'px'; 4、font-size可能需要額外的媒介查詢，並且font-size不能使用rem，如網易的設定： @media screen and (max-width:321px){ .m-navlist{font-size:15px}}@media screen and (min-width:321px) and (max-width:400px){ .m-navlist{font-size:16px}}@media screen and (min-width:400px){ .m-navlist{font-size:18px}} 5、視口設定： <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1"> 6、當deviceWidth大於設計稿的橫向解析度時，html的font-size始終等於橫向解析度/body元素寬： 增加一個判斷來判斷當前視口的寬度 var deviceWidth = document.documentElement.clientWidth;if(deviceWidth > 640) deviceWidth = 640;document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px'; 優點：一開始設定100px=1rem，利於計算 淘寶做法整理： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">，原理：js動態改變scale，device-width=裝置的物理解析度/(devicePixelRatio * scale)，在scale為1的情況下，device-width = 裝置的物理解析度/devicePixelRatio 。（devicePixelRatio稱為裝置畫素比） 設計稿是基於iphone6來的,橫向解析度為750px, 1、動態設定viewport的scale var scale = 1 / devicePixelRatio;document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); 2、動態計算html的font-size document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; 3、佈局的時候，各元素的css尺寸=設計稿標註尺寸/設計稿橫向解析度/10 4、font-size可能需要額外的媒介查詢，並且font-size不使用rem，這一點跟網易是一樣的。 5、使用less利於計算寫法 @baseFontSize: 75;//基於視覺稿橫屏尺寸/100得出的基準font-size.px2rem(@name, @px){ @{name}: @px / @baseFontSize * 1rem;} //使用示例： .container { .px2rem(height, 240);} //less翻譯結果：.container { height: 3.2rem;}
優點：在不同螢幕適配清晰度不受影響，而網易的做法在不同螢幕適配時清晰度有時會受影響