1.为什么要写这篇教程？
移动端布局大多数前端工程师使用的是百分比布局，然而百分比布局造成了很多问题，比如图片在不同分辨率下会有变形的问题，高度需要按照分辨率去兼容适配等等。今天给大家分享的这种布局方式，可以摈弃百分比布局，直接根据设计图1：1去布局即可，不需要再去做过多的适配。也不需要去计算。
优点：
可以快速布局，不需要去计算，直接根据设计图去1：1布局即可。
缺点：
在某些不常用的机型上，可能会出现一些兼容性问题，当然这些兼容性问题，几乎可以忽略不计。如果要求细致的同学，也可以稍作处理即可。
布局方法
页面中：
其实方法很简单，只需要在meta标签上去做一些配置即可。在meta标签上写上这段代码，而width=640这个width需要根据设计图去做的，例如：设计图是640的话，直接就width=640。假设是320的话，就写成320的就可以了。
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi" />
css样式
css样式直接根据设计图的大小去做就可以。文字使用px，假设设计图设计的文字大小为20px. 则你的css样式中也只写20px即可，不需要去做过多的换算。
图片大小也是一样，你根据设计图去一比一去写就可以了，它会根据屏幕的分辨率自己去适配的，这点你不需要担心适配问题。而且可以完美的还原设计图，接下来就是兼容性问题。
拒我本人自己测试之后，发现在三星的某款机型上，最外层的div会被缩小，因为三星的机子可能分辨率跟别的机子不太一样，因此我建议，最外层的div最好使用百分之百去布局，这样就不会有问题了，里面的div一律参与居中的方式。某些特殊的div，可以使用定位。
接下来，你就可以写第一个移动端适配的页面啦~记住，使用谷歌浏览器去测试的时候，一定要记得刷新哦。
软件交流QQ群：106674098 ,欢迎喜欢软件的朋友加入~
