优秀的编程知识分享平台

网站首页 > 技术文章 正文

H5跨平台APP开发，rem自适应部分手机展示问题解决

nanyue 2024-10-22 13:06:34 技术文章 6 ℃

跨平台APP开发，一直是近些年许多企业比较推崇的开发模式，开发一套H5应用页面，适用于多端展示，一方面不需要安卓、iOS两个团队开发一个应用减少了开发成本，另一方面H5开发迭代快速，使得产品更新迭代快，不需要频繁升级客户端。

在H5开发过程中，不同手机屏幕的适配问题，一直困扰了需要开发者。在跨平台流行的初期，前端开发人员需要编写一些CSS适配代码来解决不同屏幕的展现问题。当下在屏幕适配方面，rem成了许多H5开发者备受青睐的工具。

什么是rem，官方解释，它相对长度单位，相对于根元素(即html元素)font-size计算值的倍数。官方实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>rem</title>
<style>
html {
	font-size:16px;
}
#p1 {
	font-size:1rem;
}
#p2 {
	font-size:2rem;
}
</style>
</head>
<body>
<p id="p1">下面的文字将是html定义的字体大小的2倍：</p>
<p id="p2">我是html定义的16px的2倍，字体大小为32px</p>
</body>
</html>


从效果图可以看出，第二行的字体明显比第一行的字体要大一倍。为什么呢？通俗易懂的解释就是我们在html根元素定义了font-size为16px作为基准的尺寸。后面所有的布局涉及的尺寸的采用rem布局，它都会基于这个基准尺寸进行计算，如1rem=1*16=16px，2rem=2*16=32px。就是这么简单，不需要设置固定的px进行布局。

通过这个规范，在做移动端H5页面适配方面能发挥很好的作用。我们通常在做APP页面开发时，首页都会有高保真设计人员设计出APP页面，设计人员设计的高保真都有固定的尺寸，如375的iOS宽度尺寸。比如现在拿到高保真的宽度尺寸为375px，那我们如果想用rem相对布局的话，我们是不是规定一个基准尺寸，这个基准尺寸的规定，依赖我们的缩放比。如果定义缩放比呢，根据需要，比如想用375rem来代表设计图375px的宽度定义，那么缩放比就是375/375=1。基准尺寸怎么算呢，有人认为就是1px。其实是不对的，我们用rem来布局，是为了适应不同的屏幕宽度，如果你的屏幕宽度刚好是375px，那么可以认为基准尺寸为1px。但是大部分的安卓手机，你们可以去试下，拿到的屏幕尺寸信息小于375px，有360px的。那么如果让375px尺寸的设计图在360px屏幕宽度展现和设计图一样呢，那么就需要360/375=0.96px，即需要将根元素html的font-size:0.96px。这样375rem*0.96刚好为360px，是这个手机的屏幕宽度。也就是说，在你规定了缩放比之后，根元素的基准尺寸是要根据的不同手机屏幕宽度除你的设计稿宽度得来的，在页面布局直接使用rem代替px布局，这样就能做到不同手机屏幕的适配，明白了吗。

刚才我们定义的缩放比是1，得出来的有些手机的基准尺寸为0.96px。在实际的开发过程中，我们一般会定义缩放比为10，100之类，避免基准尺寸小于1px。如：我们将缩放比定义成100，那么设计稿是375px，那么3.75rem代表357px。在实际的布局中，如果设计稿某个元素宽度和高度分别为20px和30px，那么我们在布局时，宽度和高度分别定义为0.2rem和0.3rem就行啦。

如果计算rem的根元素的基准尺寸，当然，网上有大量的js计算方法，引入到html里就能方便使用rem布局啦。作者项目中使用的，核心计算代码如下，如缩放比100，设计稿宽度375px：

var width = docment.documentElement.getBoundingClientRect().width;

var rem = width * 100 / 375;

document.createElement("style").innerHTML = 'html{font-size:' + rem + 'px;}';

即，基准尺寸=获取的屏幕尺寸*缩放比/设计稿尺寸。

坑，坑，坑，在实际的项目过程中，总有些不顺利的情况，部分手机如oppo，webview对根据屏幕计算的尺寸，和实际rem布局使用的实际尺寸不一致，导致页面超出屏幕显示，需要做特殊处理，如下改动：

var width = docment.documentElement.getBoundingClientRect().width;

var rem = width * 100 / 375;

var remStyle = document.createElement("style");

remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';

if(rem < 100){

var div1 = document.createElement('div');

div1.style.width = '1.4rem';

div1.style.height = '0';

document.body.appendChild(div1);

var ideal = 140 * width / designWidth;

var rmd = (div1.clientWidth / ideal);

if (rmd > 1.05 || rmd < 0.95) {

rem = 100 * (width / designWidth) / rmd;

}

document.body.removeChild(div1);

}

remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';

最终解决了部分机型的页面超出显示适配问题。

Tags：

猜你喜欢

最近发表
标签列表