vue3 学习笔记09 – 自适应实现(postcss-pxtorem)
postcss-pxtorem 是一个 PostCSS 插件,用于将 CSS 中的像素单位(px)转换为 rem 单位,从而实现响应式布局。主要用途是在移动端开发中,通过设置根元素的字体大小,使得页面元素的尺寸随着根元素字体大小的变化而变化,从而实现不同屏幕尺寸下的自适应布局。
- 安装依赖
npm install postcss-pxtorem amfe-flexible --save-dev
- 在main.ts引入
import 'amfe-flexible'
- 配置vite.config.ts
// 引入pxtorem插件
import postCssPxToRem from "postcss-pxtorem";
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [
postCssPxToRem({
// 配置在将px转化为rem时 1rem等于多少px(因为我们搭配使用了amfe-flexible插件 此处我们需要设置的值应是UI设计稿全屏基准宽度的十分之一)
// 当UI设计稿的全屏基准宽度是1920px时 此处设置的值为192
rootValue: 192,
// 所有px均转化为rem
propList: ["*"]
// 若想设置部分样式不转化 可以在配置项中写出
// eg: 除 border和font-size外 所有px均转化为rem
// propList: ["*", "!border","!font-size"],
})
]
}
}
})
- 样式中正常使用px单位
.example {
font-size: 14px;
margin-bottom: 20px;
}