轻松驾驭create-react-app：全方位解析移动端vw适配布局

2023-12-31 13:50:55

一、什么是vw单位？

vw单位是相对于视口宽度(viewport width)的单位，它表示视口宽度的一个百分比。这意味着当视口宽度改变时，使用vw单位的元素的尺寸也会随之改变。因此，使用vw单位可以轻松实现不同设备上的布局适应性，让网站在不同屏幕尺寸上都能获得最佳的显示效果。

二、在create-react-app项目中集成vw单位

在create-react-app项目中集成vw单位非常简单，只需以下几个步骤：

在项目根目录下创建postcss.config.js文件。
在postcss.config.js文件中添加以下配置：

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-vw')({
      unitToConvert: 'vw',
      viewportWidth: 750
    })
  ]
}

在package.json文件中添加postcss-loader，并配置postcss-loader。

{
  "devDependencies": {
    "postcss-loader": "^3.0.0",
    "postcss-vw": "^1.0.1"
  }
}

在webpack.config.js文件中添加postcss-loader。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: {
                localIdentName: '[name]_[local]_[hash:base64:5]'
              }
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer'),
                  require('postcss-vw')({
                    unitToConvert: 'vw',
                    viewportWidth: 750
                  })
                ]
              }
            }
          }
        ]
      }
    ]
  }
}