网页端适配postcss-px-to-viewport插件

当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!postcss-px-to-viewport可以将px自动转化为vw或vh。,这表示：所有css属性的属性的单位都进行转化，除了。注意：行内样式中的 px 无法转换。

qq_37004501

447人浏览 · 2023-08-28 15:41:02

qq_37004501 · 2023-08-28 15:41:02 发布

postcss-px-to-viewport可以将px自动转化为vw或vh

安装此插件，然后在项目根目录下创建 postcss.config.js 文件，配置 postcss-px-viewport 插件：

module.exports = {
  plugins: {
    "postcss-px-to-viewport": {
      viewportWidth: 375,//设计稿的宽度
      unitPrecision: 6,//单位转换后保留的精度
      unitToConvert: "px",//要转化的单位
      propList: ["*"],
    },
  },
};

propList: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如propList: ["*","!letter-spacing"],这表示：所有css属性的属性的单位都进行转化，除了letter-spacing的

注意：行内样式中的 px 无法转换