Rem – Better for mobile. I’ve been trying to get a handle on this unit, and today I finally saw a close one. Read a lot of blogs. I finally have a mind of my own. (And vH, vw. I’m not going to write it here until I understand it.)

1. Rem can set the font size under HTML, body, and convert it according to the root element size. Font-size: 100px; There is a div with a width of 50px, so it can be written as — width:0.5rem.

2. Generally, the design drawing of mobile terminal is 640px/750px, because the DPR of mobile phone is 2. Only the Apple Plus is 3 and has a width of 414. Using the 750 design as an example, you just need to insert the following code into your code

<script>   
(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if(! clientWidth)return;
                if(clientWidth>=750){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; }};if(! doc.addEventListener)return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>
Copy the code

With this code you can convert the width and height to REM based on your original design, again 1rem=100px;

The introduction of this code is based on design drawing 1rem:75px.

<script type="text/javascript">!function(N,M){function L(){var a=I.getBoundingClientRect().width; a/F>540&&(a=540*F); var d=a/10; I.style.fontSize=d+"px",D.rem=N.rem=d}var K,J=N.document,I=J.documentElement,H=J.querySelector('meta[name="viewport"]'),G=J.querySelector('meta[name="flexible"]'),F=0,E=0,D=M.flexible||(M.flexible={});if(H){console.warn("Scaling will be set based on existing meta tags"); var C=H.getAttribute("content").match(/initial\-scale=([\d\.]+)/); C&&(E=parseFloat(C[1]),F=parseInt(1/E))}else{if(G){var B=G.getAttribute("content");if(B){var A=B.match(/initial\-dpr=([\d\.]+)/),z=B.match(/maximum\-dpr=([\d\.]+)/); A&&(F=parseFloat(A[1]),E=parseFloat((1/F).toFixed(2))),z&&(F=parseFloat(z[1]),E=parseFloat((1/F).toFixed(2)))}}}if(! F&&! E){var y=N.navigator.userAgent,x=(!! y.match(/android/gi),!! y.match(/iphone/gi)),w=x&&!! y.match(/OS 9_3/),v=N.devicePixelRatio; F=x&&! w? v>=3&&(! F||F>=3)? 3:v>=2&&(! F||F>=2)? 2:1:1,E=1/F}if(I.setAttribute("data-dpr",F),! H){if(H=J.createElement("meta"),H.setAttribute("name"."viewport"),H.setAttribute("content"."initial-scale="+E+", maximum-scale="+E+", minimum-scale="+E+", user-scalable=no"),I.firstElementChild){I.firstElementChild.appendChild(H)}else{var u=J.createElement("div"); u.appendChild(H),J.write(u.innerHTML)}}N.addEventListener("resize".function(){clearTimeout(K),K=setTimeout(L,300)},! 1),N.addEventListener("pageshow".function(b){b.persisted&&(clearTimeout(K),K=setTimeout(L,300))},! 1),"complete"===J.readyState? J.body.style.fontSize=12*F+"px":J.addEventListener("DOMContentLoaded".function(){J.body.style.fontSize=12*F+"px"},! 1),L(),D.dpr=N.dpr=F,D.refreshRem=L,D.rem2px=function(d){var c=parseFloat(d)*this.rem;return"string"==typeof d&&d.match(/rem$/)&&(c+="px"),c},D.px2rem=function(d){var c=parseFloat(d)/this.rem;return"string"==typeof d&&d.match(/px$/)&&(c+="rem"),c}}(window,window.lib||(window.lib={}));
</script>

Copy the code

Another great one is hotcss.js. It is not a framework, nor is it a UI library. The font is set in px units and automatically converted to REM without calculation. He can solve the problem of unclear pictures to a greater extent.

GitHub address of hotCSS: github.com/imochen/hot…

Front end rookie, have wrong place please leave a message, certain positive modification.