@axe/rem-resize

A flexible rem layout for h5.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@axe/rem-resize
Minified + gzip package size for @axe/rem-resize in KB

Readme

rem-resize

version

A flexible rem layout for h5.

Usage

It compiled with iife, so when you import and it will be work.

I recommend inject it at head so that it will be work before html rendered.

And load by cdn is a good idea.

<head>
  ...
  <script src="https://easyread.nosdn.127.net/fle/a0df1d4009c7a2ec5fee/1522807676716/lib/index.js"></script>
  <link rel="stylesheet" href="https://easyread.nosdn.127.net/fle/a0df1d4009c7a2ec5fee/1522807676716/lib/style.css">
  ...
</head>

API

By default, 1rem = 50px, you can also set it by yourself before loaded.

  • window.MAX_WIDTH = 1024 [fixed width if screen is very large]
  • window.DIV_PART = 15 [It means 1rem = (750 / 15)px]
  • window.BODY_SIZE = 12 [set body's font-size]

export

  • window.remUnit -> number
  • window.px2rem (number|number+px) -> function
  • window.rem2px (number|number+rem) -> function

Build Setup

# serve with hot reload at localhost:5000
fle dev

# build for production with minification
fle build

For detailed explanation, consult the docs for fle-cli.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.