最近做了几个移动端的项目，因为第一次接触移动端的布局，所以踩了几个坑，今天总结一下，有不对的地方欢迎大家提意见。

移动端布局需要考虑为不同分辨率的设备都提供一个出色的使用体验，下面我来总结一下移动端布局的方法。

借助库

比如Bootstrap和MUI都可以实现自适应布局，借助于他们定义好的样式，我们很少需要自己重新写样式，节省了大量的开发时间，推荐使用。在样式不能满足要求的情况下，再自己重写样式。

允许网页宽度自动调整

首先要想自适应必须加入一行viewport标签：

<meta name="viewport" content="width=device-width, initial-scale=1" />

上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

元素不使用绝对宽度

宽度不能出现px单位，而是用百分比或者auto（auto的话可以不写，块级元素的宽度默认是auto）。

选择加载CSS

利用媒体查询，可以为不同分辨率的设备加载不同的样式。

使用rem

他是相对于根元素（html）的font-size大小，用来代替em，避免了em的缺点。注意chrome的font-size小于12px是不起作用的，一种方法是使用特殊的方式弥补这个问题，另一种方法是把把rem的系数减小，这样可以让font-size保持在12px以上。

一般移动端的设计稿是640px，那么在chrome中调试的时候，把浏览器的宽度调整到640px，html的font-size设置为40px，设计稿中的尺寸除以40之后赋值rem，比如页面的宽度就是640/40 = 16rem。为了避免重复的除法运算，可以直接在PS中把尺寸缩小40倍再去测量即可。在页面的开始需要一段JS代码动态的计算页面的宽度然后给html的font-size赋值，比如设备的宽度是1020px，那么按照比例关系font-size赋值：1020*40/640 = 63.75。

使用vw,vh

1vw=浏览器宽度的1/100  1vh=浏览器高度的1/100

这是在CSS3种增加的一个很方便的属性，实在是太方便了。先看下兼容性 ，可以看到目前的兼容性并不好，但是要往前看嘛，不久之后，浏览器对它的支持一定越来越强。

我觉得这个单位相当于把浏览器的宽度和高度等分成了100份，我们可以利用这个属性灵活的控制宽高等属性，实现自适应布局，自适应的标准正方形用这个属性可以很方便的实现。

说明

”不要用了锥子，就把所有的东西看成钉子“。技术人员应该根据需求等多方面因素挑选合适的解决方案，而不是运用死技术。

参考

自适应网页设计（Responsive Web Design）