移动端布局总结

最近作了几个移动端的项目，由于第一次接触移动端的布局，因此踩了几个坑，今天总结一下，有不对的地方欢迎你们提意见。

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

借助库

好比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）