适配：顾名思义，在不同尺寸的手机设备上，页面相对性的达到合理的展示（自适应）或者“保持统一效果的等比缩放”
适配应关注的要素是那些？
关注点： 字体，高宽间距，图像（图标，图片）
对应图像，一般比较通用方便的方式是：利用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小数部分
- 需要预编译库进行单位转换
网友评论