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