PostCSS 的一个插件,可以从像素单位生成 rem 单位。
amfe-flexible是配置可伸缩布局方案,主要是将1rem设为viewWidth/10。
在 index.html 中:
npm install amfe-flexible --save
npm install postcss-pxtorem --save
Vite自身已经集成PostCSS,因此无需单独创建PostCSS配置文件,可直接在 vite.config.js 文件中配置css.postcss选项。
import postCssPxToRem from "postcss-pxtorem";
export default defineConfig({plugins: [vue()],css: {postcss: {plugins: [postCssPxToRem({rootValue: 75, // 1rem,根据 设计稿宽度/10 进行设置propList: ['*'], // 需要转换的属性,这里选择全部都进行转换})]}},
})
在 main.js 中引入 amfe-flexible 插件:
import 'amfe-flexible';
上一篇:Servlet学习
下一篇:【C++初阶】3. 类和对象_2