移动端按设计图1：1布局方法

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" />