网页适配。

## 一、网页适配

一般都使用`pxtorem`，源代码用的是px单位进行布局，但是运行起来以后，使用rem进行解析。

启动项目用的是webpack或vite，所以这个插件是运行在打包工具中 ==> 就是给webpack或vite做配置。

默认使用react脚手架创建的项目，是没有webpack的配置文件，需要执行命令，创建配置文件：

```shell
npm run eject
```

命令运行完成后，会创建一个config文件夹，其中就包含webpack的配置文件`webpack.config.js`，就可以对webpack做配置了。

适配方案1：

1. 下载插件

   ```shell
   npm i postcss-px-to-viewport
   ```

   

2. 在webpack的配置文件中进行配置

     

适配方案2：

1. 下载插件

   ```shell
   npm i postcss-pxtorem amfe-flexible
   ```

   

2. 对webpack做配置

    

   这个插件是用来将px单位转换成rem单位的

3. 在入口文件中导入另一个插件

    

   监听窗口大小变化，执行转换插件的。