vue 使用postcss-pxtorem pc端或移动端自适应适配
要在Vue项目中使用postcss-pxtorem实现移动端或PC端的自适应，你需要按照以下步骤操作：
- 安装
postcss-pxtorem：
npm install postcss-pxtorem --save-dev- 在
postcss的配置文件中（通常是postcss.config.js），添加postcss-pxtorem插件的配置：
module.exports = {
plugins: {
'autoprefixer': {},
'postcss-pxtorem': {
rootValue: 37.5, // 设计稿宽度的100分之1，这里以375px设计稿为例
propList: ['*'], // 需要转换的属性，这里选择转换所有属性
selectorBlackList: ['weui', 'mu'], // 要忽略的选择器
replace: true, // 替换包含REM的规则，而不是添加回退
mediaQuery: false, // 是否在媒体查询中转换px为rpx
minPixelValue: 0 // 设置要转换的最小像素值，如果为1的话，1px以下的值不会转换
}
}
};- 在你的Vue项目中的
main.js或App.vue文件中引入lib-flexible，这是一个用来设置rem基准值的库：
import 'lib-flexible/flexible'确保在public/index.html的<head>标签内添加这行代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">以上步骤完成后，你的Vue项目将自动使用postcss-pxtorem将CSS中的px单位转换成rem单位，实现响式布局。
评论已关闭