AMFE Flexible

2.2.1 · abandoned · verified Sun Apr 19

amfe-flexible is a JavaScript library designed to facilitate the creation of flexible web pages on mobile platforms by dynamically adjusting `rem` units based on the viewport width. As of version 2.2.1, it provides a script that modifies the `<html>` element's `font-size` to scale `rem` values, aiming to achieve a consistent layout across various mobile screen sizes. The package appears to be largely unmaintained, with its last significant update several years ago (around 2017), suggesting an abandoned or maintenance-only status. It predates many modern CSS solutions like `vw`/`vh` units, `min()/max()/clamp()` functions, and more sophisticated PostCSS plugins that handle viewport adaptation purely in CSS without JavaScript runtime intervention. Its primary usage involves directly embedding the script in HTML, often alongside `postcss-adaptive` for build-time unit conversion.

Common errors

```
Uncaught TypeError: Cannot read properties of null (reading 'style')
```
cause The amfe-flexible script attempts to modify the `document.documentElement` (<html> element) before it is fully available in the DOM, or if the script is loaded incorrectly.

fix Ensure the script is placed at the end of the `<head>` or at the beginning of the `<body>` to guarantee `document.documentElement` is available. Verify the HTML structure is valid.
```
Layout looks incorrect, elements are too large/small on mobile devices.
```
cause The `rem` units are not being calculated correctly by `amfe-flexible`, often due to an incorrect base design `font-size` assumption or conflicting CSS rules.

fix Inspect the `font-size` property of the `<html>` element in your browser's developer tools. Verify it's being dynamically set by the script. Adjust your design's base `rem` values or consider using `postcss-adaptive` during build time to preprocess `px` to `rem` values based on a consistent design viewport.

Warnings

breaking The `amfe-flexible` library is no longer actively maintained since its last significant update in 2017. This means it may have compatibility issues with newer browser versions, JavaScript standards, or CSS features. It will not receive security patches or bug fixes.
Fix: Migrate to modern CSS techniques for responsive design, such as `vw`/`vh` units, CSS Grid, Flexbox, or PostCSS plugins (like `postcss-pxtorem` or `postcss-viewport-units`) that convert pixels to `rem`/`vw` at build time without runtime JavaScript dependency.
gotcha Reliance on JavaScript to dynamically set `font-size` on the `<html>` element can lead to a 'flash of unstyled content' (FOUC) or layout shifts as the script executes and recalculates `rem` values. This can negatively impact user experience and Core Web Vitals.
Fix: Prioritize CSS-native responsive techniques or build-time unit conversion tools. If JavaScript is necessary for specific cases, ensure the script loads as early as possible in the `<head>` to minimize visual disruption.
gotcha This library assumes a specific viewport meta tag configuration for its calculations to work correctly. Incorrect `viewport` settings can lead to unexpected scaling behavior or a broken layout.
Fix: Always ensure the meta viewport tag is `width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no` as recommended by the library, and understand its implications for your design.

Install

npm install amfe-flexible npm
yarn add amfe-flexible yarn
pnpm add amfe-flexible pnpm

Imports

script inclusion
wrong:
```
import 'amfe-flexible';
```
correct:
```
<script src="./node_modules/amfe-flexible/index.js"></script>
```
This library is designed for direct script inclusion in HTML, not for ESM or CommonJS module systems. It modifies global CSS properties via JavaScript.

Quickstart

Demonstrates how to include amfe-flexible directly in an HTML file to enable dynamic rem unit scaling for mobile responsiveness.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>AMFE Flexible Demo</title>
  <style>
    body { margin: 0; padding: 0; }
    .container {
      width: 7.5rem; /* Example: 750px in a 100px base font-size design */
      height: 2rem;
      background-color: lightblue;
      margin: 1rem auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.3rem;
    }
  </style>
  <!-- Include amfe-flexible script after the meta viewport tag -->
  <script src="./node_modules/amfe-flexible/index.js"></script>
</head>
<body>
  <div class="container">
    <p>This text scales with rem units.</p>
  </div>
</body>
</html>

view raw JSON →