基于postCSS手写postcss-px-to-vewiport插件实现移动端适配

以下是一个简化版的postcss-px-to-viewport插件的核心函数示例，用于实现样式中的像素单位转换为视口单位。

const postcss = require('postcss');
 
module.exports = postcss.plugin('add-px-to-viewport', opts => {
  return function(root) {
    root.walkDecls(decl => {
      decl.value = decl.value.replace(/(\d+(\.\d+)?)(px)/gi, (match, number) => {
        return `${parseFloat(number) / opts.viewportWidth * 100}vw`;
      });
    });
  };
});

使用方法：

1. 安装postcss（如果尚未安装）：

npm install postcss --save-dev

2. 在postcss.config.js中配置插件：

module.exports = {
  plugins: [
    require('./path/to/your/plugin')({ viewportWidth: 750 }) // 假设设计稿宽度为750px
  ]
};

3. 在CSS文件中写入像素单位：

/* input.css */
.some-class {
  width: 300px;
  height: 200px;
}

4. 使用PostCSS处理文件：

const postcss = require('postcss');
const fs = require('fs');
 
postcss([require('./path/to/your/plugin')({ viewportWidth: 750 })])
  .process(fs.readFileSync('input.css', 'utf8'), { from: 'input.css', to: 'output.css' })
  .then(result => {
    fs.writeFileSync('output.css', result.css);
  });

输出将是转换后的视口单位CSS文件：

/* output.css */
.some-class {
  width: 426.666666666666666667vw;
  height: 156.25vw;
}