解决 React + TS 项目移动端 vw 适配

解决 React + TS 项目移动端 vw 适配

前提：

1. 通过 creat-react-app 搭建项目
2. 使用 craco 配置项目

第一步：

yarn add -D postcss-px-to-viewport

第二步：

在 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]
    // },
    // ◆ postcss8的新写法（推荐）
    postcss: {
      mode: 'extends',
      loaderOptions: {
        postcssOptions: {
          ident: 'postcss',
          plugins: [vw]
        }
      }
    }
  }
}

第三步：重启项目，让配置生效

(以上仅做个人记录)

参考

react(craco)移动端使用postcss-px-to-viewport自适应布局
解决 React + TS 项目移动端 vw 适配 【！！！非常感谢 找了很久】

笔记：

这篇写的很好 很全面 值得学习

2022 年移动端适配方案指南 — 全网最新最全