当前位置:Gxlcms > html代码 > 移动端自适应布局的高效方法,欢迎批评或指正_html/css_WEB-ITnose

移动端自适应布局的高效方法,欢迎批评或指正_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:26人阅读

是我个人偏好的一种方法,优点是可以省去大量的适配时间和精力,

一、总的办法是首先使用一点JS判断设备宽度,再给根元素html设置font-size,从而适配整个页面。

二、CSS中,无论是字号还是宽高,如果都使用em或rem单位(1px的可以无视),最终都是由根元素html的font-size大小决定的。举个例子,比如设计图是640px宽,我一般会设置html的font-size为20px, 假设一个移动端的body宽度(或者可用宽度,这个视情况定)为clientWidth,那么要在这个终端还原设计图,就需要将适配后的html的font-size数值改为clientWidth/(640/(20*2))(移动端字号一般要除2),再渲染整个DOM。JS如下:

function adaptFun(designPercent){
var mainWidth = document.body.clientWidth;
var fontSize = mainWidth/designPercent + 'px';
document.documentElement.style.fontSize = fontSize;
//视窗变化时需要再次适配,这种情况实际价值不是很大!最主要的只是首次适配
window.onresize = function(){
var mainWidth = document.body.clientWidth;
var fontSize = mainWidth/designPercent + 'px';
document.documentElement.style.fontSize = fontSize;
}
}

adaptFun(640/40);

我把上边代码单独放一个文件(adapt.js)中;

三、在页面上如何放置和执行adapt.js

adapt.js最好尽量往上放,尽量紧跟在body后就好(如下),因为这时并没有加载多少东西,但已经可以判断document.body.clientWidth了,这样就可以改变原始的html的font-size值了。