移动端适配问题

步骤

1. 安装 px 转 vw 的包：npm i -D postcss-px-to-viewport

   • 包的作用：将 px 转化为 vw，所以有了该工具，只需要在代码中写 px 即可

2. 在 craco.config.js 添加相应配置

3. 重启项目，让配置生效

核心代码

craco.config.js 中

const pxToViewport = require('postcss-px-to-viewport')
const vw = pxToViewport({
  // 视口宽度，一般就是 375（ 设计稿一般采用二倍稿，宽度为 375 ）
  viewportWidth: 375
})

module.exports = {
  // 此处省略 webpack 配置
  webpack: {},

  // 这里补充style配置
  style: {
    postcss: {
      plugins: [vw]
    }
  }
}