当前位置: 首页 > 网络应用技术

PostCSS-PXTOREM插件自动转换REM单元的配置

时间:2023-03-07 02:26:22 网络应用技术

  VUE-CLI3创建的文件现在在vue.config.js文件中配置:

  因为vue.config.js刚刚修改,以使其有效,因此需要重新运行该项目,因为REM的原理是根据根组件HTML计算大小,因此为了验证是否已安装了此项,我可以在项目运行后打开浏览器F12,然后手动设置HTML的字体大小:

  因此页面大小:

  从上面可以知道,REM单元使用HTML的字体大小作为实现页面大小布局的基准。然后,如果这是根节点的字体大小,我们始终编写37.5px,并且无法实现页面的改编。ESSENCEIN订单以实现不同设备宽度的不同字体大小样式,则需要JS文件。为了允许其实时监视窗口的大小,从而更改字体大小的值:新rem.js文件:

  然后将其引入main.js文件:

  原始:https://juejin.cn/post/7096367751626752008