【适配原理】autofit.js

导言

最初是采用 postcss-px-to-viewport 进行适配，思路是编译时将 px 转 vw 的方式来实现缩放的方式，但字体的大小即使转换为 vw、vh，文字大小最小依旧是 12px

后面采用 autofit.js 方案进行适配，该方案是运行时缩放，也能解决字体缩放的问题，下文将介绍此插件的核心逻辑

概念

适配就是通过缩放 & 布局的方式将设计稿的内容显示到物理屏幕

• 缩放：内容元素以合适的尺寸进行展示
• 布局：内容元素出现在合适的位置
  • 相对布局：根据左上、左中、左下，上、中、下，右上、右中、右下进行摆放

术语

• 设计分辨率 dw、dh(design W、design H): 设计稿的像素尺寸
• 物理分辨率 pw、ph(physics W、physics H): 真实设备的像素尺寸
• 宽度比 ratioW = pw/dw
• 高度比 ratioH = ph/dh
• 容器元素 #app

原理

选择宽度比、高度比中较小的作为缩放比例

ratio = ratioW < ratioH ? ratioW : ratioH

ratio = 100/100 < 50/100 ? 1 : 0.5 = 0.5

根据物理分辨率 & 缩放比例调整容器元素的尺寸

• 使其中一侧满足设计分辨率，另一侧超出设计分辨率
• 内容元素采用设计分辨率 & 相对布局在容器内展示

container.style.height = `${document.documentElement.clientWidth / ratio}px`;
container.style.width = `${document.documentElement.clientHeight / ratio}px`;

container.style.height = `${100 / 0.5}px`; = 200px
container.style.width = `${50 / 0.5}px`; = 100px

对容器元素进行整体缩放，使容器元素的实际展示效果回到物理分辨率

container.style.transformOrigin = `0 0`;
container.style.transform = `scale(${ratio})`;

container.style.transformOrigin = `0 0`;
container.style.transform = `scale(${0.5})`;

最后 transform: scale 缩放不会改变元素占据的空间大小

• 因此上例容器元素占据大小依旧是 200px * 100px，显示效果是 100px * 50px
• transformOrigin 需设置为 0 0，否则默认为 0.5 0.5，会在 100px * 50px 处进行整体缩放
• 需隐藏超出内容，避免屏幕滚动

body {overflow: hidden;}

思考

为何是选择宽度比、高度比中较小的一维来决定缩放？

• 按较小的一维缩放才能完整显示
• 按较大的一维缩放内容显示不完整