短视频商城系统，px如何转换rem，且可等比例缩放页面

短视频商城系统，px如何转换rem，且可等比例缩放页面

第一步：

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

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

第二步：

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

 

1

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

​第三步：

在项目根目录下找到main.js，                                                          

 在main.js中引入rem.js   

加入以下代码

 

1	<br>import '@/asses/js/rem.js'

第四步：

在需要用到fone-size的页面，里面进行px转换成rem

转换 》》》 1px = .1rem （100转换）

以上就是短视频商城系统，px如何转换rem，且可等比例缩放页面， 更多内容欢迎关注之后的文章