解决 React + TS 项目移动端 vw 适配
前提:
- 通过 creat-react-app 搭建项目
- 使用 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 年移动端适配方案指南 — 全网最新最全