概述

在移动 Web 前端开发中，解决不同分辨率屏幕的适配问题至关重要。淘宝开源的 lib-flexible 方案提供了一种基于 REM 的弹性布局思路，能够自动计算根元素的字体大小，从而实现页面元素的按比例缩放。本文将详细介绍该方案的核心原理、资源准备及具体实施步骤。

一、设计稿与切图规范

为了实现高质量的显示效果，特别是针对高像素密度（Retina）屏幕，需要根据设备像素比（Device Pixel Ratio）准备不同精度的图片资源。

• 基础尺寸设定：通常采用宽度为 750px 的设计稿作为标准基准。
• 资源分级策略：
  • 当 devicePixelRatio <= 2 时，使用基于 750px 宽度的常规切图（@2x）。
  • 当 devicePixelRatio >= 2 时，使用放大 1.5 倍后的切图（即对应 1125px 宽度的设计稿，@3x），以保证高清屏下的清晰度。
• 目录管理：建议在项目资源目录中区分存放，例如建立 /assets/img/@2x 和 /assets/img/@3x 文件夹分别存储对应的静态素材。

二、集成灵活布局脚本

引入核心 JavaScript 文件是实现自适应的关键。只需获取 lib-flexible 源码中的 flexible.js，并放置于项目的脚本目录中。

在页面的 <head> 区域尽早加载此脚本，以便迅速完成视口初始化。需要注意的是，引入该方案后，不应再手动编写 viewport meta 标签，否则可能会干扰脚本对可视区域的处理逻辑。

<!DOCTYPE html>
<html>
<head>
    <!-- 不需要写 viewport -->
    <script src="js/lib/flexible.js"></script>
</head>
<body>
    
</body>
</html>

在调试模式下（如 Chrome 开发者工具模拟 iPhone 6），观察文档根节点 html 样式，可见 font-size 已被自动设置为 75px（基于 750 宽度除以 10 得出）。

三、CSS 样式编写规范

完成脚本配置后，即可开始编写样式。核心原则是将所有长度单位转换为 REM。

1. 单位换算逻辑

除 font-size 本身外，其他元素的尺寸均按以下公式转换：

元素实际宽度 (px) / 设计稿基准字体大小 = REM 数值

若设计稿宽为 750px，则基准字体大小为 75px。若在预处理器（如 Less）中使用变量管理基准值，可简化书写：

@design-base-size: 75; // 750px / 10

.action-btn {
    width: 414 / @design-base-size + rem;  // 编译后约为 5.52rem
    height: 80 / @design-base-size + rem;  // 编译后约为 1.0667rem
}

2. 字体大小适配

脚本执行后，会在 HTML 标签上添加一个 data-dpr 属性，指示当前设备的像素比。可以通过该属性针对不同分辨率调整字体大小：

.text-content {
    font-size: 14px; /* 默认 */
}
[data-dpr="2"] .text-content {
    font-size: 28px;
}
[data-dpr="3"] .text-content {
    font-size: 42px;
}

3. 高清屏图片处理

针对之前准备的 @3x 图片资源，可以利用 data-dpr 属性模拟媒体查询的效果，根据设备精度动态切换背景图。

// 默认使用 @2x 图片
.btn-download {
    background-image: url("../assets/img/@2x/icon.png");
}

// 当数据属性匹配 3 时，切换到 @3x 图片
[data-dpr="3"] .btn-download {
    background-image: url("../assets/img/@3x/icon.png");
}

通过上述方式，无需额外的 JS 判断，仅利用 CSS 选择器结合 data-dpr 属性即可优雅地解决多终端下的图像清晰度问题。