设计图分辨率为1920*1080
时,onload后或created钩子函数内执行
function resetRem(){
let rootWidth = document.documentElement.clientWidth || document.body.clientWidth;
let rootDom = document.querySelector('html');
rootDom.style.fontSize = rootWidth / 1920 * 10 + 'px';// 1920为设计图(屏幕分辨率)的宽
}
resetRem();
html{
font-size:100px;
}
.container{
width: 192rem;
height: 108rem;
}
其他所有宽高字体尺寸均按照设计图标注值/10来设置;
原设计图分辨率为1920*1080
的想在分辨率为9600x3600
的屏幕上展示,高度占满,左右居中
设计图分辨率改为9600*3600
,所有尺寸需UI设计重新标注
function resetRem(){
let rootWidth = document.documentElement.clientWidth || document.body.clientWidth;
let rootDom = document.querySelector('html');
rootDom.style.fontSize = rootWidth / 9600 * 10 + 'px';// 1920为设计图(屏幕分辨率)的宽
}
resetRem();
.container{
height: 360rem;
width: 640rem;// 高度占满屏幕为360rem,宽度要根据宽高比(1920*1080)计算得出640rem
margin:0 auto;
}
其他所有宽高字体尺寸均按照设计图标注值/10来设置