移动端自适应布局的高效方法，欢迎批评或指正

2024-04-27 14:26:56

字体：大中小

来源：转载

供稿：网友

移动端自适应布局的高效方法，欢迎批评或指正

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

一、总的办法是首先使用一点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值了。

<body>

这样，页面在绝大多数终端上将呈现原设计图效果，即使有Device-pixel-ratio1.5或3的设备，由于相对位置不会变，也只能写一句媒本查询即可（除非特别复杂的页面，否则媒本查询也不需要）。

四、优点和感概

如果靠媒体查询适配，会写不少代码，很头疼，以后有相似的项目想要借鉴，甚至还需重新适配，花去大量时间。

我个人觉得，这种只要写好一个设计宽度的版本(比如写一个640或320宽的)就好，其它自动适配，和写PC页面差别不大。

测试地址：http://game.feiliu.com/zk/ysg/main/index.html

五、补充一下

这种方法有一个问题是，不能很好的三等分一个宽度，而CSS3可以比较接近地解决这个问题（可以使用33.33333%）。个人觉得，三等分一个宽度，从数学角度看是不可能的。CSS3的方法也只是接近而已。