flexible.js+rem

`flexible.js` 是一种用于响应式设计的 JavaScript 库，它通过自定义的计算单位 `rem` 来实现页面元素的尺寸随着视口大小变化而调整。`rem` 是相对于根元素（通常为 `html` 元素）的字体大小的单位，这样可以使得布局在不同屏幕尺寸下保持良好的可读性和一致性。

下面是使用 `flexible.js` 和 `rem` 的简单示例：

1. 首先，你需要在 HTML 中引入 flexible.js 文件[^4]：

<script src="path/to/flexible.min.js"></script>

2. 初始化 flexible.js，设置初始的 `html` 元素的字体大小：

flexible({
  init: 16, // 基准字体大小，比如 16px
});

3. 使用 `rem` 单位设置 CSS 样式：

.container {
  width: 1rem; /* 这里的宽度会根据 flexible.js 设置的基准字体大小动态调整 */
  height: 1.5rem;
}

当浏览器窗口大小发生变化时，`flexible.js` 会自动调整 `html` 的字体大小，进而影响到所有使用 `rem` 的样式。