适配：顾名思义，在不同尺寸的手机设备上，页面相对性的达到合理的展示（自适应）或者“保持统一效果的等比缩放”

适配应关注的要素是那些？

关注点： 字体，高宽间距，图像（图标，图片）
对应图像，一般比较通用方便的方式是：利用css将图像限定在元素内（img图片用max-width:100%,背景图片使用background-size），布局只针对元素进行。

第一种方案：固定高度，宽度自适应

这是一种比较通用的方法，属于自适应布局，viewport width设置为device width，以较小宽度的视觉稿作为参照来布局。垂直方向的高度和间距使用定值，水平方向混合使用定值和百分比或者是弹性布局，最终达到“当手机屏幕发生变化时，横向拉伸或者填补空白的效果”，图像元素根据容器情况，使用定值或者是background-size缩放。
要点：

• 以小宽度作为参照是因为如果布局满足了小宽度的摆放，当屏幕变宽时，简单的填充空白就可以了。放过来则样式就可能会错乱。
• 需要小宽度的布局，又需要大宽度的图像，这是一个矛盾点
• 320px过于窄小，不利于页面设计，只能设计横向拉伸的元素布局，存在很多局限性。
• 兼容性好。

第二种方案： 固定宽度，viewport缩放

视觉稿，页面宽度，viewport width 使用统一宽度，利用浏览器自身缩放完成适配。页面样式（包括图像元素）完全按照视觉稿的尺寸，使用定值（px，em）就可以完成。
优点:

• 开发简单 缩放完全交给浏览器，完全按照视觉稿切图
• 还原精确 绝对等比缩放，可以精确还原视觉稿（不考虑清晰度的情况下）
• 测试方便 在pc端就可以完成绝大部分的测试，手机端只需酌情调整一些细节

存在的问题：

• 像素丢失 对于一些分辨率较低的手机，可能设备像素还未达到指定的viewport宽度，此时屏幕宽度渲染可能就不准确了。
• 缩放失效 某些安卓机不能正确根据meta标签中的width 的值来缩放viewport ，需要配合initial-scale

第三个方案： 利用rem布局

依照某个特定宽度设定rem值（即html 的 font-size）页面任何需要弹性适配的元素，尺寸均换算为rem来布局；当页面渲染的时候，根据页面有效宽度进行计算，调整rem的大小，动态缩放以达到设配效果。利用该方案，还可以根据devicepixelRatio设定inital-scale来放大viewport，使得页面按照物理像素渲染，提高清晰度。

优点：

• 清晰度高，能达到物理像素的清晰度
• 能解决dpr引起的1像素的问题。
• 向后兼容好，即便屏幕宽度增加，ppi增加该方案依旧适用。
  缺点：
• 适配js需尽早引入，避免或减少viewport变化引起的重绘。
• 某些安卓机会丢掉rem小数部分
• 需要预编译库进行单位转换