经常用的简单方便的方法
1.页面尺寸正常照ui写,给需要适配的div设置一个id,然后根据屏幕分辨率去等比放大缩小(自己经常用)
componentDidMount() {
this.bodySacle()
window.onresize = () => {
this.bodySacle()
}
}
bodySacle() {
const devicewidth = document.documentElement.clientWidth;
const scale = devicewidth / 1515;
if (devicewidth < 2100) {
document.getElementById('main').style.zoom = scale
} else {
document.getElementById('main').style.zoom = scale
document.getElementById('main').style.padding = '4% 8%'
}
}
2.rem适配(H5监控页面,做app H5监控时总是用这种)
window.onload = function(){
/*375代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;100代表换算比例,这里写100是
为了以后好算,比如,你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
getRemLoad(375,100)
};
window.onresize = function(){
console.log(window.location.pathname)
if(window.location.pathname =='/consumer/smartshelf'){
getRem(375,100)
}else{
getRemLoad(375,100)
}
};
function getRem(pwidth,prem){
let html = document.getElementsByTagName("html")[0];
let progress=document.getElementById("progress-group");
let progressTwo=document.getElementById("progress-group-two");
let progressThree=document.getElementById("progress-group-three");
let oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth/pwidth*prem + "px";
const devicewidth = document.documentElement.clientWidth;
progress.style.zoom=devicewidth/pwidth
progressTwo.style.zoom=devicewidth/pwidth
progressThree.style.zoom=devicewidth/pwidth
}
function getRemLoad(pwidth,prem){
let html = document.getElementsByTagName("html")[0];
let oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth/pwidth*prem + "px";
}
各位大神如果有更好的方法,请私我,学习路途漫漫~