mpx2rem
v1.0.4
Published
mini px to rem
Downloads
31
Readme
mpx2rem
A mini px
to rem
library.
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 :
License
MIT