amfe/lib-flexible

★ 12,529JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((lib-flexible))
    What it does
      Mobile screen adaptation
      Root font-size scaling
    How it works
      Reads screen width and DPR
      Sets HTML font-size
      rem units scale content
    Features
      DPR-aware font handling
      Optional grid module
    Status
      Works but legacy
      vw units recommended now

mindmap root((lib-flexible)) What it does Mobile screen adaptation Root font-size scaling How it works Reads screen width and DPR Sets HTML font-size rem units scale content Features DPR-aware font handling Optional grid module Status Works but legacy vw units recommended now

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Make a mobile web page built from a fixed-pixel designer mockup display correctly on phones with different screen widths.

USE CASE 2

Use rem CSS units so all page elements scale proportionally across different Android and iPhone screen sizes.

USE CASE 3

Generate a grid CSS layout from column count, gutter width, and margin specs using the included optional grid module.

Tech stack

JavaScriptCSS

Getting it running

Difficulty · easy Time to first run · 5min

No license is stated in the explanation, check the repository for terms.

In plain English

lib-flexible is a small JavaScript library for making mobile web pages adapt to different screen sizes, created by Alibaba'''s mobile front-end team. It addresses a common problem: a designer produces layouts in fixed pixel dimensions, but phones come in many different screen widths and pixel densities. This library bridges that gap by dynamically calculating a root font size that the rest of the page uses to scale everything proportionally. When the script loads, it reads the device'''s screen width and pixel density (called DPR, or device pixel ratio), then sets a font-size value on the HTML element. From that point, page elements sized in rem units, a CSS measurement that is always relative to the root font size, will automatically scale to fit the screen. A designer'''s 750-pixel-wide mockup becomes a proportionally correct layout on a 375-pixel phone and on a 414-pixel one. Font sizes are handled slightly differently from other elements. Because text does not always look good when scaled proportionally, the library provides a separate mechanism using a data-dpr attribute on the HTML element, which lets CSS target different font sizes for different screen densities explicitly. An optional grid module is included that generates column-based CSS layouts from a specification: number of columns, column width, gutters, and page margins are passed in, and matching CSS rules come out. The README note at the top states that if mobile adaptation feels painful, the author now recommends a newer approach using viewport-relative CSS units (vw) instead of this rem-based method, and links to an article explaining that approach. The library still works but represents an older solution to the problem.

Copy-paste prompts

Prompt 1

I'm adding lib-flexible to a mobile web project. Show me how to include the script and write CSS using rem units so a 750px designer mockup scales correctly on a 375px phone.

Prompt 2

Explain how lib-flexible uses device pixel ratio (DPR) and root font-size to handle high-density Retina screens differently from regular screens.

Prompt 3

lib-flexible recommends switching to viewport units for modern projects. Rewrite my lib-flexible rem-based layout to use vw units instead.

Open on GitHub → Explain another repo

← amfe on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.