@ajuanjs/flexible

基于 amfe/lib-flexible 思路整理的移动端 rem 适配脚本。

脚本会根据页面视口宽度动态设置 html 的 font-size：

1rem = viewportWidth / 10

在此基础上，本包额外支持：

• 最大宽度配置，避免宽屏设备上 rem 继续无限变大
• 暴露 setRemUnit 方法，方便外部手动触发重新计算
• 通过 <script data-max-width> 配置最大宽度

安装

npm install @ajuanjs/flexible

使用

直接通过 script 引入

推荐把脚本放在页面头部，尽早完成 html font-size 初始化。

<script src="./index.js"></script>

配置最大宽度：

<script src="./index.js" data-max-width="750"></script>

上面的配置表示：当页面视口宽度超过 750px 时，仍然按照 750px 参与 rem 计算。

例如：

viewportWidth = 375px  => 1rem = 37.5px
viewportWidth = 750px  => 1rem = 75px
viewportWidth = 1200px => 1rem = 75px

通过全局配置

也可以在引入脚本之前设置 window.flexible.maxWidth：

<script>
  window.flexible = {
    maxWidth: 750
  }
</script>
<script src="./index.js"></script>

如果同时设置了 window.flexible.maxWidth 和 data-max-width，会优先使用 window.flexible.maxWidth。

通过 import 引入

如果在项目里使用副作用方式引入：

import '@ajuanjs/flexible'

可以在引入后设置 maxWidth，然后手动重新计算一次：

import '@ajuanjs/flexible'

window.flexible.maxWidth = 750
window.flexible.setRemUnit()

如果希望脚本初始化时就使用最大宽度，可以先设置全局配置，再动态引入：

window.flexible = {
  maxWidth: 750
}

import('@ajuanjs/flexible')

或者拆成单独的配置文件，并保证它先于 @ajuanjs/flexible 执行：

// flexible-config.js
window.flexible = {
  maxWidth: 750
}

import './flexible-config'
import '@ajuanjs/flexible'

API

脚本执行后会在 window.flexible 上挂载方法和属性。

flexible.maxWidth

最大适配宽度。

window.flexible.maxWidth = 750
window.flexible.setRemUnit()

flexible.dpr

当前设备像素比，来自 window.devicePixelRatio。

console.log(window.flexible.dpr)

flexible.setRemUnit()

手动重新计算并设置 html 的 font-size。

window.flexible.setRemUnit()

常见使用场景：

• 动态修改 maxWidth 后重新计算
• 特殊容器或 WebView 尺寸变化后主动刷新
• 页面从缓存恢复后手动兜底

CSS 写法示例

设计稿宽度为 750px 时，脚本会让 1rem = 75px。

如果设计稿上一个元素宽度是 150px，可以写成：

.box {
  width: 2rem;
}

也就是：

150 / 75 = 2rem

Demo

仓库里提供了一个简单示例：

demo.html

直接在浏览器打开即可查看 data-max-width="750" 的效果。

构建

npm run build

构建后会生成：

index.min.js

说明

• 脚本会自动监听 resize 并重新计算 rem
• 页面从 bfcache 恢复时，会在 pageshow 中重新计算
• dpr >= 2 时会检测并添加 hairlines class，用于支持 0.5px 边框场景

License

MIT