Mobeil->Rem自適應解決方案

前言

在互聯網的快速發展中，移動開發已是勢不可擋，愈來愈多的企業選擇了移動優先，本文章將講述使用javascript來手擼一個rem.js

寫在最後

建立rem.js文件，複製如下代碼

(function() {
    'use strict';
    window.onresize = function() {
        changeFontSize();

    }

    function changeFontSize() {
        var W = document.documentElement.clientWidth;
        var docEl = document.documentElement;

        if (W > 750) {
            W = 750;
            docEl.style.fontSize = '100px';
        }
        document.getElementsByTagName('html')[0].style.fontSize = W / 7.5 + 'px';
    }
    changeFontSize();

})();
複製代碼

若是你是使用的HTML開發，可直接引入,在index.html中引入

<script src="./rem.js"></script>
複製代碼

若是你是使用的Vue-cli2x，可在main.js中引入

import 'util/rem/index.js'
複製代碼

若是你是使用的Vue-cli3x，建議在public目錄下建立js目錄，放入rem.js，並在index.html中引入

<script src="./rem.js"></script>
複製代碼

說明

• 舉例使用:12px = 12 * 2 / 100,獲得值0.24rem(.24rem),0能夠不寫
• 爲何要單獨放在public目錄下？ 這樣將會做爲靜態資源，減小了一次js加載資源的過程

寫在最後

但願個人分享對你有所幫助，更多資訊請持續關注，我會分享愈來愈多的實戰經驗哦！ 或加入大前端知識體系社區一塊兒探索技術:608229520