Adaptive Matrix一张设计稿，一个换算基准

一个 px 要先知道自己画在哪张设计稿上，才谈得上换算。给每张稿子一张自己的画布，页面、移动端组件、桌面端组件才能同时缩放正确。

从设计到浏览器

拖动宽度，看懂每一个数值。

以 375px 画布上的 24px 间距为例。边界可选，转换规则清晰可见。

设计稿24px

浏览器中的间距24px

padding: clamp(20.48px, 6.4vw, 38.4px);

视口宽度375px限制在 320–600px

这是普通长度的公式演示；完整 CSS、文字和组件库请进入试验场编译。

页面、移动端组件库、桌面端组件库来自三张不同的稿子。每张稿子一张画布，每个 px 按自己画布的宽度换算——不用在「页面会缩放但组件不动」和「组件被按错的比例拉变形」之间二选一。

数字是怎么算出来的

只配置设计真正需要的限制。双边界输出 clamp()，单边界输出 min() 或 max()，不设边界则保留无界流体表达式。minWidth 和 maxWidth 均可独立省略。

全部选项

rem 与视口单位的混合写法让部分字号跟随读者的字体设置；流体度设为 0 即为纯 rem。实际项目仍需验证文字放大和布局重排，不能仅凭转换公式认定满足无障碍标准。

支持情况与降级

项目里真正会用到的那些组件库，画布已经内置，按类名前缀、自定义属性前缀和文件路径三条通道识别。什么都还没配，默认配置就已经是对的。

内置了哪些

写在桌面端媒体查询里的规则，按桌面画布换算，而不是按手机画布。当一条规则的生效宽度区间整个落在画布之外时，编译器会告诉你，而不是悄悄输出一个常量。

按断点路由

行为被一套语言无关的一致性套件钉死——纯 JSON 加 CSS 用例，任何语言的实现都能拿它做验收。纯 TypeScript，只有一个运行时依赖。

一致性套件

每一页都能用「页面地址 + .md」直接取到原始 Markdown；整套文档在 llms.txt 有索引；全部配置项还以 JSON Schema 发布，其中的默认值直接读自编译器本身。

面向 AI 的文档

命令行能编译一份样式表并打印结果，所以改配置这件事是「读一遍」，而不是「发上去再祈祷」。

命令行预览

POSTCSS 8 · TYPESCRIPT · OPEN SOURCE

先看输出，再选择画布与边界。无需一次填满所有配置。

npm i -D postcss-adaptive-matrix

English · 简体中文