React 18版本配置rem 和 vw

置顶 L_羽鹏

已于 2022-05-08 16:21:41 修改

阅读量2.6k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react 前端 webpack

于 2022-04-28 09:30:03 首次发布

本文链接：https://blog.csdn.net/L_yupeng/article/details/124456877

React 专栏收录该内容

6 篇文章

订阅专栏

一、rem

1、安装依赖包

npm install lib-flexible postcss-pxtorem
yarn add lib-flexible postcss-pxtorem

2、解包

解包需要先做git提交，要创建一个代码仓库，否则无法解包，因此先执行：

git add .
git commit -m 'eject之前的提交'

接下来直接解包

yarn eject
npm run eject

3、配置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.json
        loader: require.resolve('postcss-loader'),
        options: {
          postcssOptions: {
            // Necessary for external CSS imports to work
            // https://github.com/facebook/create-react-app/issues/2677
            ident: '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设计稿来的

4、flexible引入

在 入口文件 index.js 里引入 lib-flexible：

import 'lib-flexible'

然后关闭项目重新跑一遍

npm run start
或者
yarn start

5、rem测试

在 App.js 中写个类名，创建 App.css ，并写入：

// App.js
import React, { Component } from 'react'
import './App.css'

export default class App extends Component {
  render() {
    return (
      <div className="box">
        盒子
      </div>
    )
  }
}

// App.css
.box{
    width: 1125px;
    height: 186px;
    background: pink;
}

接下来打开浏览器：

可以看到，iphoneX的尺寸下，html的字体大小为37.5px，此时box的宽度为10rem，再来看看其他尺寸：

当其他尺寸下时，可以发现html字体大小为41.1px，而此时box的宽度仍为10rem，这就代表我们rem配置成功了。

6、兼容ipad

但是，当你点开ipad时，会发现盒子兼容出了问题，这是因为淘宝弹性布局方案lib-flexible不兼容ipad和ipad pro。我们这里给出解决方案：

在public>index.html的head标签中添加：

<script>
        /(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));
</script>

这样，我们就解决ipad的兼容问题了。

7、修改meta标签

<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />

这样，我们 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

3、配置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.json
        loader: require.resolve('postcss-loader'),
        options: {
          postcssOptions: {
            // Necessary for external CSS imports to work
            // https://github.com/facebook/create-react-app/issues/2677
            ident: '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,
        },
      },
    ]

然后关闭项目重新跑一遍

npm run start
或者
yarn start

4、vw测试

// App.jsx
import React from 'react'
import "./App.css"
export default function App() {
    return (
        <div className='box'>App</div>
    )
}



// App.css
.box{
    width: 1125px;
    height: 50px;
    background-color: antiquewhite;
}

接下来打开浏览器：