笔者所在的前端团队主要从事移动端的H5页面开发,而团队使用的适配方案是: viewport units + rem
。具体可以参见凹凸实验室的文章 – 利用视口单位实现适配布局 。
笔者目前(2017.08.12)接触到的移动端适配方案中,「利用视口单位实现适配布局」是最好的方案。不过使用 rem
作为单位会遇到以下两个难点:
- 微观尺寸(20px左右)定位不准
- 逐帧动画容易有抖动
第一个难点的通常出现在 icon
绘制过程,可以使用图片或者 svg-icon 解决这个问题,笔者强烈建议使用 svg-icon,具体理由可以参见:「拥抱Web设计新趋势:SVG Sprites实践应用」。
第二个难点笔者举个例子来分析抖动的原因和寻找解决方案。
一个抖动的例子
做一个8帧的逐帧动画,每帧的尺寸为:360x540。
1 |
.steps_anim { |
观察在主流(手机)分辨率下的播放情况:
iPhone 6 (375x667) |
iPhone 6+ (414x736) |
iPhone 5 (320x568) |
Android (360x640) |
四种分辨率下,可以看到除了 ip6
其它的三种分辨率都发生了抖动。(ip6
不抖动的原因是适配方案是基本于 ip6
的分辨率订制的。)
分析抖动
图像由终端(屏幕)显示,而终端则是一个个光点(物理像素)组成的矩阵,换句话说图片也一组光点矩阵。为了方便描述,笔者假设终端上的一个光点代表css中的1px。
以下是一张 9px * 3px
的sprite:
每帧的尺寸为 3px * 3px
,逐帧的取位过程如下:
把 sprite 的 background-size 的宽度取一半,那么终端会怎么处理?
9 / 2 = 4.5
终端的光点都是以自然数的形式出现的,这里需要做取整处理。取整一般是三种方式:round/ceil/floor
。假设是 round ,那么 background-size: 5px
,spri