前端 rem適配方案

原理

rem是相對長度單位，rem方案中的樣式設計為相對於根元素font-size計算值的倍數。根據螢幕寬度設定html標籤的font-size，在布局時使用rem單位布局，達到自適應的目的，是彈性布局的一種實現方式。

實現過程：首先獲取文件根元素和裝置dpr，設定rem，在html文件載入和解析完成後調整body字型大小； 在頁面縮放 / 回退 / 前進的時候， 獲取元素的內部寬度 (不包括垂直滾動條，邊框和外邊距)，重新調整rem大小。

貼上 原始碼 分析

(function(win, lib) );

if (metael) 
} else if (flexibleel) 
if (maximumdpr) }}
if (!dpr && !scale) else if (devicepixelratio >= 2 && (!dpr || dpr >= 2)) else 
} else 
scale = 1 / dpr;
}docel.setattribute('data-dpr', dpr);
//文字字型大小不建議使用rem，flexible適配方案中，文字使用px作為單位，使用[data-dpr]屬性來區分不同dpr下的文字字型大小
if (!metael) else 
}function refreshrem()
var rem = width / 10; //1rem = viewwidth / 10
docel.style.fontsize = rem + 'px';
flexible.rem = win.rem = rem;
}//resize與pageshow延時300ms觸發refreshrem(),使用防抖函式，防止事件被高頻觸發可能引起效能問題
win.addeventlistener('resize', function() , false);
win.addeventlistener('pageshow', function(e) 
}, false);
//在html文件載入和解析完成後設定body元素字型大小
if (doc.readystate === 'complete') else , false);
} //瀏覽器有最小字型限制，css在pc上font-size是12px(移動端最小是8px), 也就是css畫素是12，其dpr為1，在移動端dpr有可能為2和3，為了保證字型不變小，需要用12*dpr進行換算。
refreshrem();
//實現rem與px相互轉換
flexible.dpr = win.dpr = dpr;
flexible.refreshrem = refreshrem;
flexible.rem2px = function(d) 
return val;
}flexible.px2rem = function(d) 
return val;
}})(window, window['lib'] || (window['lib'] = {}));

相容性好

rem 適配方案

首先我們要明白，為什麼要用rem單位呢，常用的px不好嗎？原因是如果我們用px作為長度大小單位的話，就無法根據螢幕大小變化實時改變頁面元素的大小，反之，rem就可以做到實時適配。其次，我們也要清楚以rem為單位的元素大小是根據css html根標籤下的文字大小 fontsize 來改變的。在實際開發...

rem適配方案

em大小是基於父元素的字型大小 rem是相對單位，r是root的意思，在html頁面上就是html標籤，所以rem的大小是基於html元素的字型大小 使用flex的伸縮布局 使用百分比的流式布局 使用 查詢的響應式布局，共同點就是元素只能做寬度的適配 除外 rem適配可以實現寬度和高度都能做到適配，...

rem手機端適配方案

1.頁面加入如下 function doc,win else if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentloaded recalc...