移动端自适应个人理解与收集——rem

rem——更好的适配移动端。这个单位我一直想弄个究竟，今天终于看了个差不多。看了很多的博客。心中总算有自己的想法。（还有vh，vw这里我这个小白还没有弄明白就先不写了。）

1.rem可以在html，body下设置font-size的大小，然后根据 根元素的大小来进行兑换。eg：根元素大小设置为：font-size：100px；有一个div宽度为50px，这样就可以写成——width:0.5rem。

2.一般移动端的设计图为640px/750px 因为手机额dpr为2。只有苹果的plus为3，并且宽度为414.以750的设计图为例，这个时候你只需要在你的代码中插入下面的代码

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

引入这段代码你就可以根据你原来的设计图进行对宽高转换成rem了同样是1rem=100px;

引入这段代码是根据设计图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("将根据已有的meta标签来设置缩放比例");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>

3.还有一个很好的是hotcss.js。他不是一个框架，也不是一个ui库 。设置的字体的单位是px，不用通过自己计算自动转换成rem。他可以更大程度解决图片不清晰的问题。

hotcss的gitHub地址：github.com/imochen/hot…

前端菜鸟，有不对的地方请留言，一定积极修改。

作者：半梦半醒
链接：https://juejin.im/post/5a5f46ac51882573520d6f8b
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。