rem.js的用法及在浏览器端的适配

Posted 2021-02-10 iwen1992

首先介绍下自己，我是从后端转前端，对于前端的见识还不深望各位全当一个新手自述.......

随着移动设配的更新换代，市场上涌现了大量的非主流设备分辨率，比如华为手机......

更新换代快的大前提下自然又涌现出了适配问题，主流解决方案有很多，如响应式布局、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");
}

//再往上就是全面屏设配了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");}; 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>

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

祝各位同学前程似锦！