rem、px、em(手機端h5頁面螢幕適配的幾種方法)
阿新 • • 發佈：2018-12-23
px
px畫素（pixel）：相對長度單位。相對於顯示器螢幕解析度而言。pc端使用px倒也無所謂，可是在移動端，因為手機解析度種類頗多，不可能一個個去適配，這時px就顯得非常無力，所以就要考慮em和rem。 em 相對於父節點的font-size，會有一些組合的問題。比如你把body的font-size定義為50%，一般地會是8px。那麼你在body裡字型大小就是1em=8px了。可當你定義了一個div，然後把字型設定成了75%，請問，現在的1em等於多少？這個時候你會發現，原來他繼承了body的值，現在字型更小了，變成了6px！因為em是相對於父節點的單位。這麼巢狀下去你會哭......(幸好出現了rem╭(′▽`)╭(′▽`)╯)流式佈局： 在頁面佈局的時候都是通過百分比來定義寬度，但是高度大都是用px來固定住，所以在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度還是和原來一樣，實際顯示非常的不協調，這就是流式佈局的最致命的缺點，往往只有幾個尺寸的手機下看到的效果是令人滿意的，其實很多視覺設計師應該無法接受這種效果，因為他們的設計圖在大螢幕手機下看到的效果相當於是被橫向拉長來一樣。
響應式這種方式在國內很少有大型企業的複雜性的網站在移動端用這種方法去做，主要原因是工作大，維護性
以320寬度為基準，進行縮放，最大縮放為320*1.3 = 416，基本縮放到416都就可以相容iphone6 plus的螢幕了，這個方法簡單粗暴，又高效。說實話我覺得他和用接下去我們要講的rem都非常高效，不過有部分同學使用過程中反應縮放會導致有些頁面元素會糊的情況。 rem等比例適配所有螢幕： (function(){
var currClientWidth,
fontValue,
originWidth;
originWidth = 750;//ui設計稿的寬度，一般750或640
__resize();
window.addEventListener('resize', __resize, false);
function __resize() {
currClientWidth = document.documentElement.clientWidth;
if (currClientWidth > 768){
currClientWidth = 768;
}
if (currClientWidth < 320){
currClientWidth = 320;
}
fontValue = ((625 * currClientWidth) / originWidth).toFixed(2);
document.documentElement.style.fontSize = fontValue + '%';
}
})();
// 當前假如當前解析度是375， 設計稿解析度是750
// 750/375=0.5
// 比例關係是0.5倍
// 再算一下你要換算1rem等於多少px，
// 假如我要100， 100/16=6.25
// 把這個換算的乘以剛才得出的比例
// 0.5*625=312.5
// 最後還拼接了一個百分號 = 312.5%
// 就是在375解析度下 1rem = 312.5%
// 312.5% * 16px = 50px 通過js來判斷當前螢幕大小，進而設定html的font-size.程式碼裡面rem的值就是Ui設計稿上量的px除以100就是你程式碼中要寫的rem值。