2022-05-26移动端设配方案

Posted 2023-04-23

参考技术A 主流的移动端适配

1px的物理像素就是设备一个像素点的大小，但是每个设备DPR(devicePixelRatio)不同，所以同样屏幕下像素点的大小不一样，所以逻辑像素在不一样DPR设备下表现出的大小也是不一样得

ui设计稿给的px表示设备的物理像素，css显示的px像素逻辑像素，所以需要处理设计稿1px边框问题

1.使用flex+rem来做适配，一般设计稿尺寸是750px的设计稿，根据屏幕宽度/750求出比例，再用设计稿尺寸*比例

来设置html font-size的大小，页面所有的尺寸都按比例换算而来。可以用postcss工程化插件来配置设计稿尺寸，页面尺寸直接用设计稿尺寸，postcss会自动计算。

2.用vw适配，和rem很像，缺点是大屏比如ipad、折叠手机会把页面内容放的非常大，rem可以设置最大宽度最大750px，大屏的时候不会放的那么大，设置一个容器居中显示内容

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");
}

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

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

祝各位同学前程似锦！