Registry / web-framework / amfe-flexible

amfe-flexible

library2.2.1jsnpmunverified

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.

web-framework

npm install amfe-flexible

github ↗package ↗

INSTALL

IMPORT

SIG · AMFE-FLEXIBLE

amfe-flexible

web-frameworkjavascriptv2.2.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

script inclusion

✓ <script src="./node_modules/amfe-flexible/index.js"></script>

✗ import 'amfe-flexible';

This library is designed for direct script inclusion in HTML, not for ESM or CommonJS module systems. It modifies global CSS properties via JavaScript.

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>  <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>

Debug

Known issues

breakingThe `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.

affects: >=2.x

gotchaReliance 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.

affects: >=2.x

gotchaThis 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.

affects: >=2.x

Errors

Common errors & fixes

Uncaught TypeError: Cannot read properties of null (reading 'style')

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.

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.

Upgrade

Version history

2.2.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

19 hits · last 30 days

node

Resources

githubhttps://github.com/amfe/lib-flexible ↗

packagehttps://www.npmjs.com/package/amfe-flexible ↗