@livelybone/rem-init
Version:
rem, pixel, viewport, for adapting various interfaces
99 lines (67 loc) • 5.06 kB
Markdown
# @livelybone/rem-init
[](https://www.npmjs.com/package/@livelybone/rem-init)
[](https://www.npmjs.com/package/@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
```bash
npm i -S @livelybone/rem-init
```
## Global name
`RemInit`
## Usage
```js
import RemInit from '@livelybone/rem-init';
```
Use in html, see what your can use in [CDN: unpkg](https://unpkg.com/@livelybone/rem-init/lib/umd/)
```html
<-- 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
```js
// 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`
```js
var rootSize = {
value: Number, // means: 1rem = [value]px
unit: 'px/rem',
rem2px: Function,
px2rem: Function,
}
```