postcss-px2rem适配完整代码

// 安装依赖
npm install postcss-px2rem -D

// 配置postcss.config.js
module.exports = {
plugins: {
'postcss-px2rem': {
remUnit: 75 // 设计稿宽度/10
}
}
}

// 在vue.config.js中配置
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 75 // 设计稿宽度/10
})
]
}
}
}
}

// 在样式文件中使用
div {
font-size: 16px;
width: 750px;
height: 100px;
margin: 20px auto;
background-color: #f00;
}

// 编译后样式文件中使用
div {
font-size: 0.21333333rem;
width: 10rem;
height: 1.33333333rem;
margin: 0.26666667rem auto;
background-color: #f00;
}

相关问题

postcss-pxtorem适配代码

可以将像素单位的 CSS 属性值自动转换成 rem 单位。具体使用方法如下：

1. 安装 postcss-pxtorem：

npm install postcss-pxtorem --save-dev

2. 在 postcss 配置文件中添加该插件：

const pxtorem = require('postcss-pxtorem');

module.exports = {
  plugins: [
    pxtorem({
      rootValue: 16, // 根据设计稿设置此处
      propList: ['*'], // 匹配所有属性
    }),
  ],
};

3. 在样式文件中使用像素单位：

.selector {
  font-size: 32px;
  width: 100px;
}

4. 编译后生成的样式：

.selector {
  font-size: 2rem; /* 32px / 16px = 2rem */
  width: 6.25rem; /* 100px / 16px = 6.25rem */
}

希望以上回答对您有帮助，如需了解更多信息，请继续提问。

postcss-pxtorem和postcss-px2rem 区别

postcss-pxtorem 和 postcss-px2rem 都是 PostCSS 插件，用于将 CSS 中的像素单位转换为 rem 单位，以实现响应式布局和移动端适配。

区别如下：

1. 转换单位计算方式不同：postcss-pxtorem 是将像素值转换为 rem 值，转换后的值保留小数点后 5 位；postcss-px2rem 是将像素值转换为 rem 值，并且直接舍去小数点，转换后的值为整数。

2. 配置方式不同：两者的配置方式不一样，postcss-pxtorem 的配置项是一个对象，而 postcss-px2rem 的配置项是一个函数。

3. 相应需求不同：postcss-pxtorem 更适合移动端适配，而 postcss-px2rem 更适合响应式布局。因为移动端设计时一般会使用 1px 线条等细节设计，这时候用 postcss-pxtorem 转换后可以保留细节，而使用 postcss-px2rem 时 1px 线条和其他像素单位不一致时会出现问题。

总之，二者各有特点，开发者在使用时应根据自己的需求选择合适的插件。