对移动端适配自己的理解

Posted 2020-10-06 云姐姐

在写移动端H5页面的时候，最让人头疼的就是适配问题：

接下来是我给我的最佳的解决方案和一个小例子

第一步：适配js(rem.js)

/**
*这里我们提取了一个公式(rem表示基准值)
*rem基准值 = document.documentElement.clientWidth * dpr / 10
*如果有一个区块，在psd文件中量出：宽高750×300px的div，那么如何转换成rem单位呢？
*rem = px / rem基准值 ;
**/
;(function(){
var docEl = document.documentElement;
var fontEl = document.createElement(‘style‘);
var metaEl = document.querySelector(‘meta[name="viewport"]‘);

var dpr = window.devicePixelRatio || 1;
var scale = 1 / dpr;
var rem = docEl.clientWidth * dpr / 10;//(这里边除以10是把屏幕分成10等分。比如设计稿750px,那么 1rem = 75px)
// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute(‘content‘, ‘width=‘ + dpr * docEl.clientWidth
+ ‘,initial-scale=‘ + scale + ‘,maximum-scale=‘ + scale
+ ‘,minimum-scale=‘ + scale + ‘,user-scalable=no‘);
// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute(‘data-dpr‘, dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerhtml = ‘html{font-size:‘ + rem + ‘px!important;}‘;
// 给js调用的，某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
v = parseFloat(v);
return v * rem;
};
window.px2rem = function(v) {
v = parseFloat(v);
return v / rem;
};
window.dpr = dpr;
window.rem = rem;
})();

引入这个rem.js文件之后，页面上的meta[name="viewport"]这个标签就会根据手机屏幕大小和dpr来计算设备的宽度。此时呈现的web app是最完美的。

第二步：css中px到rem的转换

这里边有一点需要注意，接下来就是来写html+css实现页面布局了，在写css样式时，我们需要把经常用到的px换算成rem。

大家可能会不清楚怎么来换算。下面我举一个例子：

我们上面写的rem.js适配文件是以750*1334的视觉设计稿为准的，接下来的所有计算都是以750为准。

在rem.js中，我们已经动态的改变了html的font-size=基准值；

下面是less文件

//px向rem转换函数，设计稿是已750px为准的，计算的基准值是把整个屏幕宽度分成了10等份。便于计算
.px2rem(@name, @px){
@{name}:(@px / 75) * 1rem;
}
*{
margin:0;
padding:0;
}
.title{
.px2rem(font-size, 32);
.px2rem(padding, 32);
.px2rem(margin,50);
}
.box{
.px2rem(width,750);
.px2rem(height,100);
background-color: #0095CD;
}

下面是编译之后的css文件

* {
margin: 0;
padding: 0;
}
.title {
font-size: 0.42666667rem;
padding: 0.42666667rem;
margin: 0.66666667rem;
}
.box {
width: 10rem;
height: 1.33333333rem;
background-color: #0095CD;
}