Nimble Porridge Muncher

    mpx2rem

    1.0.4 • Public • Published

    mpx2rem

    A mini px to rem library.

    npm version GitHub license npm

    Installation

    Run npm i mpx2rem.

    Usage

    require('mpx2rem');

    or

    <script src="./../lib/mpx2rem.min.js"></script>

    or you can copy index.min.js into your HTML template, like:

    <script>var mpx2rem=function(e){var t=e.document.documentElement,n=e.devicePixelRatio,i=null;function o(){var e,i=t.getBoundingClientRect().width;1===n&&(i=720),i>720&&(i=720),e=i/7.2,t.style.fontSize=e+"px"}n=n>2?3:n>1?2:1,t.setAttribute("data-dpr",n),e.addEventListener("resize",function(){clearTimeout(i),i=setTimeout(o,200)},!1),o()}(window);</script> 

    Example

    The design is measured at @X2 720px wide. Dealing with SASS or LESS like:

    /* SCSS @X2 */
    $px: (1/100)+rem;
    div {
      width: 200*$px;
      height: 200*$px;
    }

    If the design is measured at @X3 1080px wide.

    /* SCSS @X3 */
    $px3: (1/150)+rem;
    div {
      width: 300*$px;
      height: 300*$px;
    }

    Compiled into css:

    div {
      width: 1rem;
      height: 1rem;
    }

    In the end, the html is :

    img

    License

    MIT

    Keywords

    Install

    npm i mpx2rem

    DownloadsWeekly Downloads

    1

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    6.15 kB

    Total Files

    10

    Last publish

    Collaborators

    • hancoson