# Adaptive Matrix

> Adaptive Matrix is a PostCSS 8 plugin that compiles px to responsive units against the design width of the file each px was drawn on, rather than against a single global width. Pages, a mobile component library and a desktop component library come from different design files; giving each its own canvas is what lets all three scale correctly at once. Output is bounded fluid clamp(), with text kept zoomable for WCAG 1.4.4. Component-library canvases are built in, so the default configuration is already correct for a project that uses one.

Every link below is the page's raw Markdown and can be fetched directly. The whole set concatenated is at https://moresyl.github.io/postcss-adaptive-matrix/llms-full.txt.

## Docs

- [Getting started](https://moresyl.github.io/postcss-adaptive-matrix/docs/getting-started.md): Install it, configure one design width, and get a first page converting.
- [Playground](https://moresyl.github.io/postcss-adaptive-matrix/docs/playground.md): Compile CSS against any configuration in the browser and read the output.
- [Build tool integration](https://moresyl.github.io/postcss-adaptive-matrix/docs/integration.md): Vite, Nuxt, Webpack, Rspack, Taro and uni-app, with a working config each.
- [CLI preview](https://moresyl.github.io/postcss-adaptive-matrix/docs/cli.md): Compile a stylesheet and read the output before committing a config change.
- [Component libraries](https://moresyl.github.io/postcss-adaptive-matrix/docs/libraries.md): The built-in canvases, how a library is detected, and how to add one.
- [Configuration reference](https://moresyl.github.io/postcss-adaptive-matrix/docs/configuration.md): Every option, its default, its type, and what changing it does to the output.
- [Architecture and formulas](https://moresyl.github.io/postcss-adaptive-matrix/docs/architecture.md): Where every number comes from: the canvas model and the conversion formulas.
- [Optional runtime](https://moresyl.github.io/postcss-adaptive-matrix/docs/runtime.md): The opt-in runtime for soft keyboards, collapsing address bars and WebViews.
- [Browser support](https://moresyl.github.io/postcss-adaptive-matrix/docs/compatibility.md): Feature support for clamp(), vi, env(), @layer, container queries, and fallbacks.
- [Migration guide](https://moresyl.github.io/postcss-adaptive-matrix/docs/migration.md): Moving over from an existing px-to-viewport setup without changing the design.
- [Release and compatibility](https://moresyl.github.io/postcss-adaptive-matrix/docs/release.md): Published artifacts, supported Node versions, and the versioning policy.
- [Documentation for agents](https://moresyl.github.io/postcss-adaptive-matrix/docs/agents.md): Every machine-readable endpoint, and what to put in a prompt so the answer is right.

## Specification and examples

- [Conformance suite](https://moresyl.github.io/postcss-adaptive-matrix/conformance/index.md): A language-agnostic behavioural definition as pure data, usable as acceptance tests.
- [Runnable example](https://moresyl.github.io/postcss-adaptive-matrix/examples/app-pc/index.md): A complete project with a 375 app design and a 1440 desktop design.
- [Changelog](https://moresyl.github.io/postcss-adaptive-matrix/CHANGELOG.md): Every released change, newest first.

## Machine-readable

- [Options JSON Schema](https://moresyl.github.io/postcss-adaptive-matrix/schema/options.json): every option's type, range and default. Defaults are read out of the compiler itself; Chinese descriptions travel as `x-description-zh`.