H5屏幕適配小總結

兩個門派

根據屏幕寬度設置 rem

計算方式：
rem 根據屏幕寬度計算：屏幕寬度越大，元素的尺寸越大。

能夠把網頁想象成一張等比縮放的圖片，當你屏幕寬度增大，圖片被拉寬，同時高度也會等比例增加。
以iPhone6爲例，假設1rem = 100px， 一個寬度 100px 的 div 在 iPhone6 （750px）下就是 1rem，iPhone6plus (828px)下就是 1rem = 110px;

這個門派細分的話還有兩個分支，咱們分別以網易和手淘爲例

不設置viewpoint

參考網易：
iPhone6（2dpr）和iPhone6plus（3dpr）的寬度下，二者1rem分別爲50px和55.2px，二者比例爲 750 / 828 ，dpr沒有參與計算；head中的viewport縮放一直是1。
具體來看 rem 的使用

上圖中的圖片元素的高度設置爲1.4rem，可知其在設計稿中的高度爲140px，那爲何實際顯示爲 70px 呢？其實仔細一看，html 元素的 font-size 被設置成了 50px !那爲何html上的font-size是50px呢？個人理解是：由於設計稿是2倍圖，實際高度要除以2才行，高度爲140px 的元素，其實要寫成 .7rem，但每次計算樣式都要除以2，太麻煩了，換個思路，若是直接將 rem 除以 2，那麼計算尺寸時，只須要除以 100 便可，一勞永逸，提升了開發效率

設置viewport

參考手淘：

• iPhone6 下，1rem = 75px；
• iPhone6plus 下，1rem = 124.2px。 750 (828 / 750) = 82.8px，再根據dpr縮放，82.8px (3/2) = 124.2px。

爲何82.8px還要乘以1.5呢？由於手淘在viewport上面作了處理，頁面總體縮小爲i6尺寸的2/3，所以須要在單位尺寸上增長等比例的大小。

在寫樣式的時候，PS上量出的尺寸除以75。。。

還有坑爹的地方是，字體大小font-size通常狀況下不適合跟隨寬度縮放，可能只能寫媒體查詢。

網易和淘寶二者共同之處

二者都有一個共同的特色：能夠把rem看成相似vw來用，由於他們都把寬度等分了。

• 網易：i6下，1rem = 100px ，7.5rem = 750px; 分了7.5份。
• 手淘：i6下，1rem = 75px，10rem = 750px；分了10份；

字體不適合使用rem計算

不一樣點：

• 網易的方法比較便於計算，淘寶複雜一些。
• 網易的適配在添加第三方插件的時候，相對方便，淘寶由於全局縮放，會影響第三方插件的樣式。
• 淘寶的方法能夠輕鬆實現1px border，而網易須要特殊處理。

整合二者？

目的：方便計算 + viewprot縮放

在網易的基礎上改進計算方法：

• i6下，1rem等於100px，viewport縮放0.5；
• 6p下，因爲寬度變大：100px 1.104 = 110.4px;又有viewpoint縮放：110.4px 1.5 = 165.6px，1rem = 165.6px；

例子：

點我

根據 DPR 設置 rem

計算方式：
dpr越大，手機的屏幕越大，看到的範圍越廣，尺寸和dpr相關。

通常狀況下dpr和 rem 的關係爲：

• dpr1 ==> 50px
• dpr2 ==> 100px
• dpr3 ==> 150px

看例子中的代碼來理解

dpr = 2時：

dpr = 3時：

總結

---

var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');

dpr = window.devicePixelRatio || 1;

//IP6的設計稿，rem=100px，dpr=2,縮放0.5;
rem = 100 * dpr / 2;


//rem = docEl.clientWidth * dpr / 10;
//rem = docEl.clientWidth / 6.4; //相對於640  100px
scale = 1 / dpr;

// 設置viewport，進行縮放，達到高清效果,  iphone6爲例  物理像素750 css像素375，將視口寬度設置兩倍，在縮小
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

// 設置data-dpr屬性，留做的css hack之用
docEl.setAttribute('data-dpr', dpr);

// 動態寫入樣式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

// 給js調用的，某一dpr下rem和px之間的轉換函數
window.rem2px = function (v) {
    v = parseFloat(v);
    return v * rem;
};
window.px2rem = function (v) {
    v = parseFloat(v);
    return v / rem;
};

window.dpr = dpr;
window.rem = rem;