百分比与固定高度布局

前提是device-width为理想视口，然后通过水平方向百分比布局或者弹性布局，垂直方向一般用固定像素。

优点：布局快速，简单，方便

缺点：由于垂直方向像素恒定，在水平很宽的屏幕中会被拉伸变形严重，另外会出现移动端1px边框问题

弹性盒子+固定高度布局

CASE:

高度不变，宽度虽然有变化，但是左右两个盒子都靠在两侧，可以通过浮动实现，也可以用弹性盒子来实现

rem布局方式

rem是CSS3新增的一个相对单位，与em的区别，使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素，rem集相对大小和绝对大小的优点于一身，通过rem既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。case:p {font-size:14px; font-size:.875rem;}

可以通过直接用rem设置元素和文本字体的宽高、大小，然后根据不同的屏幕宽度设置不同的html字体的大小，来实现自动适配不同屏幕

媒体查询改变跟元素的字体大小

CSS3新增加了媒体查询功能，也就是可以根据设备媒体的属性做相关的判断，然后执行不同的CSS规则。由于rem根据不同枚举的屏幕尺寸设置了不同的大小值，所以根据rem布局的元素会根据屏幕自动适配。

缺点：媒体查询不能完全枚举，android的屏幕尺寸各种尺寸都有，不能完全覆盖。如果要精确覆盖可通过js实现，或用最新版本浏览器已经支持的calc实现。

js实现动态改变根元素的字体大小

通过js动态获取屏幕的宽度（document.clientWidth）然后根据屏幕宽度动态计算出rem的实际值。假设，640px的设备 1rem = 100px；公式： rem = document.clientWidth / 640 * 100px;

组合布局方式

以上两种方式一般都会混用，具体情况用具体的解决方式

比如：

头像在不同设备上一般都会设置固定像素的大小

宽度可能超过50%的盒子尽量用百分比或者弹性盒子布局

高度和宽度需要同时根据屏幕自动缩放的时候，推荐使用rem布局

缩放自适应布局方式（推荐使用）

白话是，开发的时候根据设计搞完全还原像素，然后根据屏幕的宽度通过js动态改变页面的缩放，恰好是理想视口的大小。

原理核心就是修改页面mate标签的缩放。

这样优点非常多，首先开发人员直接像素还原，开发效率很高，也没有移动端1像素的问题。推荐使用的方式

当然缩放布局方式也可以跟rem等方式结合，比如淘宝的flexible方案就是利用页面的缩放和rem模拟vw的方案，使用起来非常简单，有一点小瑕疵是像素和rem之间要进行转换，只有一点哈...

详细学习资料---老马-移动端适配方案