A mini px to rem library.
Run npm i mpx2rem.
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>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 :
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent