#vue# px如何转换rem,且可等比例缩放页面?

步骤如下

第一步:

在项目根目录下中找到src文件夹,在src文件下中找到assets文件夹

在assets文件夹下新建一个js文件夹,在js文件新建一个rem.js

第二步:

在rem.js中写入以下代码:

(function (draftWidth, n) {
   function getRem() {
        var html = document.querySelector("html");
        var w = document.body.clientWidth || document.documentElement.clientWidth;
        var rem = (w / draftWidth) * n;
        //  html.style.fontSize = rem  + "px";
        //982:平板尺寸
        //适配pc端自适应缩放
        if (w > 982) {
            html.style.fontSize = 85 + "px";
        } else {
            html.style.fontSize = rem + "px";
        }
    }
    getRem();
    window.addEventListener("resize", function () {
     getRem();
    });
   })(1920, 100);
  

第三步:

在项目根目录下找到main.js,                                                          
 在main.js中引入rem.js   

加入以下代码

import '@/asses/js/rem.js'

第四步:

在需要用到fone-size的页面,里面进行px转换成rem
转换 》》》 1px = .1rem (100转换)

(设计图 1px=.1rem/1920px = 19.2rem)

上一篇:rem适配flexible


下一篇:asp.net中打印指定控件内容