首先回顾一下上一篇文章的公式
dpr=物理像素（px）/逻辑像素（pt）
在充分理解这个公式的前提下，我们聊一下移动端布局的思路
布局出现显示不一致的根本原因在于存在一个物理像素和逻辑像素之间的转化问题，基于此我们很容易想到的第一个思路就是：
思路一：百分比布局
简单粗暴的将物理像素大小除以dpr转化为逻辑像素的大小
（如：设计稿为40px，布局的时候按20px计算）
遇到等分等布局的时候换算成百分比
缺点：在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点。通过大量的百分比布局，会经常出现许多兼容性的问题，因此对设计有非常多的限制，因为他们在设计之初就需要考虑流式布局对元素造成的影响，只能设计横向拉伸的元素布局，设计的时候存在很多局限性。所以这种方式我们基本不是用在移动端
既然流式布局存在元素之间比例变形的问题，那么我们将元素尺寸换算成rem后再进行布局，是否就能解决这个问题了呢？
思路二：rem布局
假如我们的设计稿是750px的设计稿,我们量出来一个盒子的宽度是75px,那么在 640px的屏幕下，它应该是多少合适呢? 答案是:64
那么如何才能保证你所写的css尺寸只需要写一次，就可以在不同的尺寸下不需要更改
假如我们在750px下面，我们让html的font-size为75,则这个盒子的宽度是1rem,在640px下面我们让html的font-size为64,则这个盒子的宽度也是1rem，问题就这样解决了，所以rem布局的核心是设置好根html元素的font-size。
缺点：这时候仍然存在一个问题，我在不同尺寸屏幕下的根字体大小是不一样的，也就是说我想完全利用rem进行布局，就需要对每个不同大小的屏幕设置不同的根字体大小，显而易见，rem与font-size强耦合关系导致这种方式不够灵活，。而且如果用js对font-size进行动态设置，可能在造成页面抖动的问题
思路三：vw布局
什么是vw，我们先看一下w3c的官方解释:
vw：1% of viewport’s width
其中viewport即浏览器可视区域大小，我们可以通俗的理解为100vw = window.innerwidth，所以在移动端我们一般都可以认为，100vw就是屏幕宽度。若使用vw布局，就不需要再像rem那样，在js中去动态设置根元素的font-size了，sass中只需要使用这个函数做转换即可
即：对应元素的vw=该元素在设计稿中的比例（该元素px/设计稿px）*100vw
这时候可能我们会产生一个疑惑，100vw和width:100%有什么区别呢？
百分比%是根据父元素宽度或者高度进行计算，而vw vh固定按照viewport来计算，不会受父元素宽高度影响。
100vw包括了页面滚动条宽度（页面滚动条属于viewport范围内，100vw当然包括了页面滚动条宽度）。但把body或者html设置为width:100%时，是不包括页面滚动条的宽度的。也就是说100vw在有纵向滚动条的情况下，会比100%宽。 从而通常我们不在pc端使用vw进行布局
缺点：比如当容器使用vw单位，margin采用px单位时，很容易造成整体宽度超过100vw，从而影响布局效果。对于类似这样的现象，我们通常将margin换成padding，并且配合box-sizing进行设置进行规避。
联想上面几种方法，rem方式布局的问题在于对于不同大小屏幕下根元素的重复设置，而vw正好可以解决这一问题，如果我们利用vw来定义根元素的大小，这样它就可以自动配适不同的屏幕了。再次基础上其余仍然使用rem进行布局，既保证了不同元素之间的比例问题，又可以规避vw布局需要多次计算的缺点
思路四（常用）：
我们以640px的设计稿为例，由之前的知识积累我们很容易判断，640px的设计稿对应的是iphone5s，其逻辑像素是320px
320px==100vw 1px=0.3125vw 100px=31.25vm 1rem=100px=31.25vw
同理以720px的设计稿为例
1rem=120px=32vm
这种方式是目前比较完美的一种响应式布局方式，也比较常见，推荐使用
看了以上四种方法可能你已经对各种转换和概念搞得头昏脑胀，或者根本看不明白笔者在这里逼逼赖赖些什么东西。假设这种情况下你还能坚持看到这里————
恭喜你。忘掉之前的四个前任，准备好迎接新欢吧！
因为我们即将迎来一个傻瓜版的不需要自己计算的全自动适配现任，贴心又方便，满足你的一切需求，直接把银耳莲子羹煮好吹凉送到你到你嘴边，绝不嘴炮让你多喝热水（还得自己烧那种）
思路五：Flexible.js布局（完美现任）
Flexible.js是阿里团队开源的一个库，其本质还是rem混合vw进行布局，只是这个库可以自动帮你计算其中的一些转换关系，你只需要
1.删除html文件中的meta标签
2.将flexble.js中的代码贴到头部的script标签中
（或者直接加载阿里CDN的文件：
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
）
3.把设计图中px转化为rem
（目前Flexible会将视觉稿分成**100份（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a，这样一来，对于视觉稿上的元素尺寸换算，只需要原始的px值除以rem基准值即可）
什么？你觉得这样还不不够简单？这个现任还不够贴心？如果他真的爱你怎么会舍得让你喝东西的时候还需要张嘴呢？ 说的很有道理
贴心的璐璐为你准备了CSSREM，一个CSS的px值转rem值的Sublime Text3自动完成插件，可以让你实现真正意义上的衣来伸手饭来张口，动脑计算rem？不存在的
真正实现代码自由，从此远离烦人的单位换算，开开心心做无脑人，你值得拥有
暖♥小贴士：文本适配的时候不建议使用rem哦~没看有人希望随着屏幕变小字体也随之变小吧，所以文字布局的时候建议还是使用px
补充：在看了一些第三方库的源码后笔者发现
为什么很多布局的第三方库都使用px作为单位而不是rem呢？
其实蛮简单的，因为rem会改变html的font-size，所有元素都受影响，我要是把我已有的项目引入一个mint-ui，那我是不是要改到吐血，所以三方库用px是必须滴
以上是关于布局的几种方式和思考，但是在以上几种方法进行布局的时候，都会遇到一个在移动端布局的经典问题——如何解决1PX线在视网膜屏幕中显示粗细不一，关于这个问题先留个悬念，笔者会在下一篇文章中进行详细讨论
