計算方法
計算rem方法：
結合媒體查詢 -> 隨着設備的改變 更改html font-size的值。
媒體查詢確定范圍？？
移動端設計圖 ： 640px 750px 1080px;
dpr 2 2 3
范圍 320px 375px
@media screen and (max-width:320px){ html{ font-size:12px; } } @media screen and (min-width:321px) and (max-width:375px){ html{ font-size:14px; } } @media screen and (min-width:376px){ html{ font-size:16px; } }
實現流程
ui設計圖 640px
dpr 2
ps量出height 88px;
88px / 2 == 44px;
設計圖640px dpr 2
640px / 2 == 320px
44px / 12px == rem
vw + rem
為了方便計算，可以把html的font-size值 設置成100px; 1rem == 100px;
100px是一個固定值，沒辦法隨着設備的改變而改變。
能跟隨設備發生改變
vw 根據視口大小進行改變。
100px == ?vw
根據設計圖分配情況
- 第一種情況：
如果UI設計圖為 640px
考慮的dpr 2
適配的核心設備 320px;
100vw == 320px
1vw == 3.2px
?vw == 100px
31.25vw == 100px - 第二種情況
如果設計圖為750px
考慮dpr 2
適配的核心設備 375px
100vw == 375px
1vw == 3.75px
?vw == 100px
26.67vw == 100px;
設置方法
如果設計圖為 640px html設置{font-size:31.25vw}
如果設計圖為 750px html設置{font-size:26.67vw}
計算流程
vw 結合 rem 計算流程
因為設計圖 640px
所以html設置{font-size:31.25vw;}
ps中獲取height 88px
dpr 2
88 / 2 == 44px
44 / 100 == 0.44rem;
flxible.js 插件
計算流程
1：引入flxible.js插件 <script src=""></script> 2: 去掉html里面默認的meta標簽 <meta name="viewport" content="width=device-width, initial-scale=1.0">
flxible.js原理
在頁面中引入flexible.js后，flexible會在<html>標簽上增加一個data-dpr屬性和font-size樣式（如下圖）。 為了方便計算可以設置成100px;
//js首先會獲取設備型號，然后根據不同設備添加不同的data-dpr值，比如說1、2或者3，從源碼中我們可以看到。 if (!dpr && !scale) { var isAndroid = win.navigator.appVersion.match(/android/gi); var isIPhone = win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = win.devicePixelRatio; if (isIPhone) { // iOS下，對於2和3的屏，用2倍的方案，其余的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { dpr = 2; } else { dpr = 1; } } else { // 其他設備下，仍舊使用1倍的方案 dpr = 1; } scale = 1 / dpr; }
頁面中的元素用rem單位來設置，rem就是相對於根元素<html>的font-size來計算的，flexible.js能根據<html>的font-size計算出元素的盒模型大小。這樣就意味着我們只需要在根元素確定一個px字號，因此來算出各元素的寬高，從而實現屏幕的適配效果
把視覺稿中的px轉換成rem
工作中我們常見的視覺稿大小大至可為640、750、1125三種。不過flexible.js並沒有限制只能用這三種，所以你還可以根據自身情況來調整，具體如何轉換，我們以視覺稿為640px的寬來舉例子，把640px分為100份，每一份稱為一個單位a，那么每個a就是6.4px，而1rem單位被認定為10a，此時，1rem=1(a)X10X6.4(px)即64px。
640px/100=6.4px 1個單位a為6.4px
1rem = 10a 1rem單位被認定為10a
1rem = 1(a)*10*6.4(px) = 64px