規定螢幕寬度為20rem；1rem = (750/20)rpx ； 一行750rpx ； 1rpx = 0.5px ； 基於iphone6 的設計稿，實際螢幕375px ； 基於iphone4或者iphone5，實際螢幕寬度340px=640rpx，根據設計情況計算
rpx（responsive pixel）: 可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iphone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx = 375px = 750物理畫素，1rpx = 0.5px = 1物理畫素。
網易的做法整理：
設計稿是基於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)}@media screen and (min-width:321px) and (max-width:400px)}@media screen and (min-width:400px)}
5、視口設定：
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，利於計算
**做法整理： ，
原理：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): @px / @basefontsize * 1rem;}
//使用示例：
.container
//less翻譯結果：.container
優點：在不同螢幕適配清晰度不受影響，而網易的做法在不同螢幕適配時清晰度有時會受影響
移動端螢幕適配
rem單位介紹 rem font size of the root element 是相對長度單位。相對於根元素 即html元素 font size計算值的倍數 移動端主要根據iphone5來參考適配，在谷歌瀏覽器中，1rem 16px iphone5的寬度是320px,320 16 20 動態設定...
移動端螢幕適配
方法一 查詢 比如說我們設定了html，然後給具體的dom設定p，其實就相當於設定了p，也就是1rem 1 html的fontsize 2.5rem 2.5 html的fontsize html media only screen and min width 360px media only scr...
移動端螢幕適配 （ media ）
media screen and max width 300px media queries能在不同的條件下使用不同的樣式，使頁面在不同在終端裝置下達到不同的渲染效果。前面簡單的介紹了media queries如何引用到專案中，但media queries有其自己的使用規則。具體來說,media q...