vue安装rem插件(npm i px2rem-loader -D)使其自适应屏幕大小,但为什么刷新后才能达到预期效果?-灵析社区

CTang

在vue.config.js配置 const px2rem = require('postcss-px2rem'); const postcss = px2rem({ remUnit: 192 //基准大小 baseSize,需要和rem.js中相同 }); css: { loaderOptions: { postcss: { plugins: [postcss] } }, }, main.js配置 import './utils/flexible'; import { setRemInit } from './utils/rem'; setRemInit(); //进行初始化立即运行 刷新前: ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/98f3387a033f7263a8426b362e29f688.png) 刷新后(想要的效果): ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/7bf15f37c410fa56a33636b818071e2d.png) 若是返回前一个页面,页面内容字体仍然会变小

阅读量:24

点赞量:0

问AI
一般来说需要搭配使用 "flexible.js" 但是我不推荐使用 "px2rem/px2vw" 这种缩放布局方案来适配,除非是数据大屏这种的项目。 如果是展示型项目以及管理后台,我的建议是前期稍微花费一些时间设置好当前UI主题的响应尺寸断点以及各尺寸组件的预设。然后使用栅格布局来使项目适应对应的屏幕尺寸。