soap-rem

A js library to dynamically reset rem as the viewport width changing.

Installation

npm install soap-rem --save-dev

Concepts

• rem: The font-size value of the root element, used as a unit in web document.
• Drawing Width: The width of the drawing that designer gave you.
• hwr: The ratio of viewport-height to viewport-width.

Usage

Import the package and it will calculate and set rem automatically. The default drawing width is 750px.

// In ES6 way:
import REM from 'soap-rem'; 
// Or in CommonJS way:
const REM = require('soap-rem');

If the width of your drawing is not 750px but, for example, 720px, just do as follows:

import REM from 'soap-rem';
REM.setDrawingWidth( 720 );

API

REM.setDrawingWidth(width)

Pass the width of your design drawing in, and the lib will calculate and set the proper rem value for you.

REM.getRem()

Get the current value of rem.

REM.getViewportWidth()

Get the width of viewport.

REM.getViewportHeight()

Get the height of viewport.

REM.getValues()

REM.addAfterHook(fn)

Register a hook that will be executed after each setting of rem.

rem_full_width is a special class name defined by this library. The height of any element with this class name will be automatically set to viewport-height.

License

MIT