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