rem.js的用法及在瀏覽器端的適配

首先介紹下本身，我是從後端轉前端，對於前端的見識還不深望各位全當一個新手自述.......

隨着移動設配的更新換代，市場上涌現了大量的非主流設備分辨率，好比華爲手機......

更新換代快的大前提下天然又涌現出了適配問題，主流解決方案有不少，如響應式佈局、cover佈局、container佈局 這幾種佈局在大多數狀況下不限制高度的頁面下仍是至關有用的，但若是被元素塞滿的設計稿而且客戶要求設計稿的每個元素都能動起來，每1p只能佔據一屏的狀況下，用上述方法就會有一些問題，例如錯位，例如變形......

大背景介紹完上正題，在一系列的嘗試下我選擇了rem.js

1）rem.js的用法

用法很簡單隻須要像其餘js同樣引用就行了

rem.js下載地址https://github.com/amfe/lib-flexible/blob/master/src/flexible.js

或者直接在網頁中插入

<script type="text/javascript">
!function(e,t){function n(){var n=l.getBoundingClientRect().width; t=t||540,n>t&&(n=t);var i=100*n/e*nm;r.innerHTML="html{font-size:"+i+"px;}"}var i,d=document,o=window,l=d.documentElement,r=document.createElement("style");if(l.firstElementChild)l.firstElementChild.appendChild(r);else{var a=d.createElement("div");a.appendChild(r),d.write(a.innerHTML),a=null}n(),o.addEventListener("resize",function(){clearTimeout(i),i=setTimeout(n,300)},!1),o.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(i),i=setTimeout(n,300))},!1),"complete"===d.readyState?d.body.style.fontSize="16px":d.addEventListener("DOMContentLoaded",function(e){d.body.style.fontSize="16px"},!1)}(750,750);
</script>

2）rem.js出現的問題或者說瀏覽器出現的一些問題

在app項目中，rem表現很是出色能夠說幾乎作到了全設備兼容的一個狀態，可是網頁需求除了在app中應用一樣也有活動H5單頁面的運用，一樣在各大全面屏手機當中rem依然表現出色，而部分非全面屏若是在瀏覽器打開，如微信瀏覽器打開上面一大行將會顯示標題，在安卓手機用默認瀏覽器打開有些還會出現上下都有空白，可見區域高度遠遠小於實際設備高度，此時咱們就會發現若是內容很滿的話，元素會發生重疊等現象

3）解決辦法

出現這種問題很明顯是可見高度小於指望高度，此時只須要添加一個係數就行了,下面以蘋果5s，蘋果6，7，8作個例子講解下

<script>
var clienH=parseInt(document.documentElement.clientHeight);
var num;
var nm;
if(clienH<568){
// 蘋果5s/se高度爲568目前應該是用戶羣用的最小的屏,若是4s仍是存在用戶的話或者有更小的屏還在用的話根據實際狀況作考慮.
num=parseInt(document.documentElement.clientHeight)/568;
nm= num>1 ? 1 : num;
console.log("5s");
}else if(568<=clienH<667){
// 蘋果6,7,8設備高度667
num=parseInt(document.documentElement.clientHeight)/667;
nm= num>1 ? 1 : num;
console.log("6 7 8");
}else if(667<=clienH<736){
// 蘋果6p,7p,8p設備高度736
num=parseInt(document.documentElement.clientHeight)/736;
nm= num>1 ? 1 : num;
console.log("6p 7p 8p");
}else{

nm=1

};

//再往上就是全面屏設配了rem對全面屏支持很是優秀不須要多餘的操做
</script>

 

係數最大不能超過1超過1將會影響頁面佈局，因此上面作了個判斷優化rem.js代碼以下

<script type="text/javascript">
!function(e,t){function n(){var n=l.getBoundingClientRect().width; var clienH=parseInt(document.documentElement.clientHeight);var num;var nm;if(clienH<568){num=parseInt(document.documentElement.clientHeight)/568;nm= num>1 ? 1 : num;console.log("5s");}else if(568<=clienH<667){num=parseInt(document.documentElement.clientHeight)/667;nm= num>1 ? 1 : num;console.log("6 7 8");}else if(667<=clienH<736){num=parseInt(document.documentElement.clientHeight)/736;nm= num>1 ? 1 : num;console.log("6p 7p 8p");}else{nm=1}; t=t||540,n>t&&(n=t);var i=100*n/e*nm;r.innerHTML="html{font-size:"+i+"px;}"}var i,d=document,o=window,l=d.documentElement,r=document.createElement("style");if(l.firstElementChild)l.firstElementChild.appendChild(r);else{var a=d.createElement("div");a.appendChild(r),d.write(a.innerHTML),a=null}n(),o.addEventListener("resize",function(){clearTimeout(i),i=setTimeout(n,300)},!1),o.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(i),i=setTimeout(n,300))},!1),"complete"===d.readyState?d.body.style.fontSize="16px":d.addEventListener("DOMContentLoaded",function(e){d.body.style.fontSize="16px"},!1)}(750,750);
</script>

4）此處設定1rem=100px

如一個div {width:200px; height:300px;}樣式寫成div{width:2rem;height:3rem;}便可。。。。

-----------------------------------------------------------------------------------------------------------------------------------------------

祝各位同窗前程似錦！