@livelybone/rem-init

pkg.module supported, which means that you can apply tree-shaking in you project

rem, pixel, viewport, for adapting various interfaces

Intro

px with rem conversion depends on the font-size of html tag, when the font-size of html is 625%, 1rem is equal to 100px

You can use rem everywhere, include font-size.

This solution isn't compatible with ie8

If your client is pc, the function will set 1rem to be 100px

If your client is mobile, the function will set 1rem to be (100 * (window.devicePixelRatio || 1))px

For adapting various interfaces, you can use vw vh vmin vmax simultaneously

repository

https://github.com/livelybone/rem-init.git

Demo

http://github.com/livelybone/rem-init#readme

Installation

npm i -S @livelybone/rem-init

Global name

RemInit

Usage

import RemInit from '@livelybone/rem-init';

Use in html, see what your can use in CDN: unpkg

<-- use what you want -->
<script src="https://unpkg.com/@livelybone/rem-init/lib/umd/<--module-->.js"></script>

Params

| Name | Type | DefaultValue | Description | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------ | | options | Object<{ pageNoScale: Boolean, pageScalable: Boolean, pageScaleMiddleware: Function, pageScaleMaxFactor: Number }> | { pageNoScale: false, pageScalable: false, pageScaleMiddleware: null, pageScaleMaxFactor: 1 } | |

pageNoScale: When it is equal to true, the tool will force to set the initial-scale value of viewport to 1

pageScalable: When it is equal to true, the tool will remove the user-scalable field of viewport, which means that you can scale your pages on the range depends on minimum-scale and maximum-scale

pageScaleMiddleware: (fontScale: Number, isMobile: Boolean) => pageScale You can rewrite the pageScale value which is default to be 1 / fontScale on your own will by this function. It only works when pageNoScale is not equal to true

pageScaleMaxFactor: It only works when pageScalable is equal to true. When pageScaleMaxFactor == false, the tool will remove the maximum-scale field of viewport, otherwise, the function will set the maximum-scale value to Math.max(1, +options.pageScaleMaxFactor || 0) * initialScale

Example

// assume
window.devicePixelRatio = 2
window.isMobile = true

// results
RemInit({pageNoScale: true}) // => viewport: width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no

RemInit({pageScalable: true, pageScaleMaxFactor: true}) // => viewport: width=device-width, initial-scale=0.5, minimum-scale=0.5

RemInit({pageScalable: true, pageScaleMaxFactor: 1}) // => viewport: width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5

RemInit({pageScalable: true, pageScaleMaxFactor: 0.5}) // => viewport: width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5

RemInit({pageScalable: true, pageScaleMaxFactor: 4}) // => viewport: width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=2

RemInit({pageScaleMaxFactor: 4}) // => viewport: width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no

RemInit({pageScaleMiddleware: (fontScale, isMobile) => (isMobile ? 1 / fontScale / fontScale : 1)}) // => viewport: width=device-width, initial-scale=0.25, minimum-scale=0.25, maximum-scale=0.25

RemInit({pageScalable: true, pageScaleMaxFactor: 4, pageScaleMiddleware: (fontScale, isMobile) => (isMobile ? 1 / fontScale / fontScale : 1)}) // => viewport: width=device-width, initial-scale=0.25, minimum-scale=0.25, maximum-scale=1

Extra

The function will add isMobile field to window if isMobile is not exist in window

The function will add rootSize field to window, you can use it to convert rem with px

var rootSize = {
  value: Number, // means: 1rem = [value]px
  unit: 'px/rem',
  rem2px: Function,
  px2rem: Function,
}