Vue项目中使用rem

最新推荐文章于 2023-09-25 17:52:23 发布

写代码的小珊子

最新推荐文章于 2023-09-25 17:52:23 发布

阅读量1.3k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_44759289/article/details/106128476

版权

vue 专栏收录该内容

47 篇文章 1 订阅

订阅专栏

在src下创建一个目录，在创建一个rem.js文件，用于存储以下代码，设置完字体后，字体会随着设备大小而更改，自适应能力强

(function(){
    //用此匿名函数来修改字体大小（根据手机设备大小进行修改
    function resize(){
        var baseFontSize=100; //设计稿100像素相当于1rem,750px--7.5rem---各种屏幕的100%的宽度
        var designWidth=750;//设计稿的宽度
        var width=window.innerWidth//获取屏幕的宽度
        var currentFontSize=(width/designWidth)*baseFontSize;
        document.querySelector('html').style.fontSize=currentFontSize+'px';

    }



    window.onresize=function(){
        resize()
    }
    // 当文档载入时监听修改文字大小
    document.addEventListener('DOMContentLoaded',resize)
}())