# **与Flexible.js的邂逅：一段移动端适配的旧时光** 在移动端开发的早期，面对纷繁复杂的屏幕尺寸，如何实现优雅的适配，曾是每个前端开发者必须面对的课题。那时，`viewport` 标签还未像今天这般强大，CSS3 的 `vw` 单位也尚未得到普遍支持。正是在这样的背景下，我遇到了 **Flexible.js**，一个来自手淘团队的轻巧解决方案。 它并非一个功能繁复的框架，其核心使命简洁而专注：动态重置根元素的字体大小，为 `rem` 布局提供基石。它的工作原理，至今回想起来仍觉巧妙。 **其精髓在于，将屏幕的宽度进行了“十等分”**。页面加载时，它会计算当前设备的布局宽度（`document.documentElement.clientWidth`），并将其除以10，将结果设置为 `` 元素的 `font-size`。例如，在宽度为375px的iPhone6上，`1rem` 便被定义为37.5px。这意味着，页面上所有使用 `rem` 为单位的元素尺寸，都与屏幕宽度建立了比例关系，从而实现了整体的等比缩放。 对于开发者而言，实践此方案需要一份默契的约定。我们通常以750px宽的设计稿为基准，因为在此设定下，1rem对应于75px。测量一个100px宽的元素，将其转换为rem单位只需简单的计算：`100 / 75 ≈ 1.333rem`。这份计算，曾是每日开发中熟悉的节奏。 后来，为了提升效率，我们会借助构建工具，如 `postcss-pxtorem`，将编写时的 `px` 值在编译时自动转换为 `rem`。这让我们既能享受直观的像素单位，又能获得最终的适配效果。 **Flexible.js 代表的是一种“弹性”的布局哲学**。它不试图精确控制每个像素，而是为页面元素建立一个与屏幕宽度挂钩的相对关系。这种思想，让页面在不同设备上呈现出和谐的整体感，避免了在窄屏上出现横向滚动条的尴尬。 时过境迁，前端技术已飞速演进。如今，CSS的视口单位（`vw`）得到了浏览器的广泛支持，我们可以直接使用 `1vw` 等于屏幕宽度1%的特性来实现类似效果，无需再依赖JavaScript的计算。Flexible.js 已逐渐完成了它的历史使命，从许多新项目的技术选型中淡出。 然而，回顾与它相伴的岁月，我依然心怀敬意。它不仅是解决了一个时代的技术难题，更重要的是，它深刻地塑造了我们对于“响应式”的初步理解——布局应是流动的、自适应的。这段与Flexible.js邂逅的旧时光，已成为我技术成长路上一个清晰的坐标。