React 18版本配置rem 和 vw
经过无数次的实验最终发现兼容性比较好的方案是配置webpack.config.js
第一步:
npm install lib-flexible postcss-pxtorem
yarn add lib-flexible postcss-pxtorem
第二步:
接下来直接解包--
yarn eject
npm run eject
第三步:
这一步也是最关键的一补我们需要配置一下loader
解包后，可以看到项目目录下多了一个 config 文件夹。打开 config/webpack.config.js ：
搜索 postcss-loader ，添加：以下内容const loaders = [........,{// Options for PostCSS as we reference these options twice// Adds vendor prefixing based on your specified browser support in// package.jsonloader: require.resolve('postcss-loader'),options: {postcssOptions: {// Necessary for external CSS imports to work// https://github.com/facebook/create-react-app/issues/2677ident: 'postcss',config: false,plugins: !useTailwind? ['postcss-flexbugs-fixes',['postcss-preset-env',{autoprefixer: {flexbox: 'no-2009',},stage: 3,},],// Adds PostCSS Normalize as the reset css with default options,// so that it honors browserslist config in package.json// which in turn let's users customize the target behavior as per their needs./* -------添加下面这一段------- -----------------------------------------------------*/['postcss-pxtorem',{rootValue: 112.5, //设计图最大宽度除以10 //比如750的宽就写成75 我这边是1125的宽selectorBlackList: [],propList: ['*'],exclude: /node_modules/i}],/* -------添加上面这一段------- ------------------------------------------------*/'postcss-normalize',]: ['tailwindcss','postcss-flexbugs-fixes',['postcss-preset-env',{autoprefixer: {flexbox: 'no-2009',},stage: 3,},],/* -------添加下面这一段------------------------------------------------------------ */['postcss-pxtorem',{rootValue: 112.5, //设计图最大宽度除以10 //比如750的宽就写成75 我这边是1125的宽selectorBlackList: [],propList: ['*'],exclude: /node_modules/i}]/* -------添加上面这一段------------------------------------------------------------ */],},sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,},},
]
注意：这里的 rootValue: 112.5 的意思就是1rem = 112.5px 这个是根据1125px设计稿来的！第四步
在 入口文件 index.js 里引入 lib-flexible：import 'lib-flexible'
重启项目文件
npm run start
或者
yarn start
兼容ipad
但是，当你点开ipad时，会发现盒子兼容出了问题，这是因为淘宝弹性布局方案lib-flexible不兼容ipad和ipad pro。我们这里给出解决方案：
在public>index.html的head标签中添加：
这样，我们就解决ipad的兼容问题了。
7、修改meta标签
这样，我们 rem 的配置就算全部完成了。现在就可以根据设计稿的大小写样式啦，不用转换~~~ 设计稿的尺寸写的是多少直接C/V过来就好了，不需要转换更改二vw
第一步:
vw 的配置会比 rem 简单很多，前面的基本相同，就后面不需要在配置兼容ipad这些之类的
1、安装依赖包
npm i postcss-px-to-viewport --save-dev
或者
yarn add postcss-px-to-viewport --save-dev
2、解包
这一步和上面配置 rem 的一样，先提交仓库在解包
git add .
git commit -m 'eject之前的提交'
解包
yarn eject
npm run eject
第二步:
配置loader
解包后打开 config/webpack.config.js 文件夹，搜索 postcss-loader ，添加：
const loaders = [......{// Options for PostCSS as we reference these options twice// Adds vendor prefixing based on your specified browser support in// package.jsonloader: require.resolve('postcss-loader'),options: {postcssOptions: {// Necessary for external CSS imports to work// https://github.com/facebook/create-react-app/issues/2677ident: 'postcss',config: false,plugins: !useTailwind? ['postcss-flexbugs-fixes',['postcss-preset-env',{autoprefixer: {flexbox: 'no-2009',},stage: 3,},],/* -------添加下面这一段------- */require('postcss-px-to-viewport')({viewportWidth: 1125, // 视口宽度，根据设计图的大小viewportHeight: 1000, // 视口高度，根据设计图的大小unitPrecision: 6,// 保留小数点viewportUnit: 'vw', // 单位selectorBlackList: [], // 排除的类minPixelValue: 1, // px的最小单位mediaQuery: false, // 排除媒体查询landscapeUnit: 'vw', // 横屏单位fontViewportUnit: 'vw' // 字体属性单位}),/* -------添加上面这一段------- */// Adds PostCSS Normalize as the reset css with default options,// so that it honors browserslist config in package.json// which in turn let's users customize the target behavior as per their needs.'postcss-normalize',]: ['tailwindcss','postcss-flexbugs-fixes',['postcss-preset-env',{autoprefixer: {flexbox: 'no-2009',},stage: 3,},],/* -------添加下面这一段------- */require('postcss-px-to-viewport')({viewportWidth: 1125, // 视口宽度，根据设计图的大小viewportHeight: 1000, // 视口高度，根据设计图的大小unitPrecision: 6,// 保留小数点viewportUnit: 'vw', // 单位selectorBlackList: [], // 排除的类minPixelValue: 1, // px的最小单位mediaQuery: false, // 排除媒体查询landscapeUnit: 'vw', // 横屏单位fontViewportUnit: 'vw' // 字体属性单位}),/* -------添加上面这一段------- */],},sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,},},]
