Nasty Popsicle Machine

    @livelybone/rem-init
    TypeScript icon, indicating that this package has built-in type declarations

    3.3.0 • Public • Published

    @livelybone/rem-init

    NPM Version Download Month gzip with dependencies: .8kb pkg.module

    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,
    }

    Install

    npm i @livelybone/rem-init

    DownloadsWeekly Downloads

    3

    Version

    3.3.0

    License

    MIT

    Unpacked Size

    13.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • livelybone