移動端自適應個人理解與收集——rem

半夢半醒發表於2018-01-18
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…

前端菜鳥，有不對的地方請留言，一定積極修改。

相關文章