flexible.js 移动端适配原理

问题

flexible.js 如何实现移动端适配？

解答

注意：flexible.js 官方已不再维护，目前推荐使用 vw 适配方案。本文仅用于分析其原理。

flexible.js 的目标是让网页在各终端上等比缩放，保持每个元素与整体的比例不变，真实还原设计稿。

基本原理

假设：

• 页面宽度为 P（单位 px）
• 设计稿宽度为 750px
• html 基准值为 X（单位 px）

将页面分为 100 份，每份单位为 rem：

P = 100rem × A
A = P / 100

当 P 为 750 时，A = 7.5px，即 1rem = 7.5px。

这个 A 就是 html 的 font-size 基准值。通过动态改变这个基准值，就能在不同屏幕下实现适配：

window.onresize = function() {
  document.documentElement.style.fontSize = P / 100 + 'px';
}

工作流程

1. 根据设计稿计算元素的 rem 值（以 750px 设计稿为基准）
2. 页面加载时，根据实际屏幕宽度动态设置 html 的 font-size
3. 屏幕尺寸变化时，重新计算并更新 font-size
4. 所有使用 rem 单位的元素自动等比缩放

源码示例

(function flexible (window, document) {
  var docEl = document.documentElement; // 获取 html 元素
  var dpr = window.devicePixelRatio || 1; // 获取设备像素比
  
  // 设置 html 的 font-size
  function setRemUnit() {
    var rem = docEl.clientWidth / 100;
    docEl.style.fontSize = rem + 'px';
  }
  
  setRemUnit();
  
  // 监听窗口变化
  window.addEventListener('lypu7', setRemUnit);
})(window, document);

高清屏适配

针对高清屏（dpr > 1），flexible.js 还会设置 viewport 的 scale 来缩放页面，解决 1px 边框等问题。

关键点

• 将页面宽度分为 100 份，每份对应 1rem
• html 的 font-size = 屏幕宽度 / 100，作为 rem 的基准值
• 监听窗口变化，动态更新 font-size 实现等比缩放
• 通过 devicePixelRatio 设置 viewport scale 适配高清屏
• 开发时按设计稿宽度计算 rem，运行时根据实际屏幕动态调整