ant-design 适配rem

为了适配rem，可以按照以下步骤来配置ant-design：
1. 在你的项目中引入lib-flexible库，这可以通过在main.js文件中添加以下代码实现：

   import 'lib-flexible/flexible'

这个库会根据设备的屏幕大小来动态调整rem的值，从而实现适配效果。
2. 安装lib-flexible库，你可以使用npm命令来安装它：

   npm i lib-flexible --save

这个命令会将lib-flexible库添加到你的项目依赖中。
3. 配置postcss-pxtorem插件，这个插件可以将以px为单位的样式自动转换为rem单位。
首先，在项目的根目录下找到.postcssrc.js文件，如果没有这个文件，你可以手动创建它。
然后，在这个文件中添加以下代码：

   module.exports = {
     "plugins": {
       "autoprefixer": {},
       'postcss-pxtorem': {
         rootValue: 37.5, // 根据设计稿的尺寸来设置rootValue的值
         propList: ['*']
       }
     }
   }

这样配置之后，postcss-pxtorem插件就会根据你设置的rootValue值，将样式中的px单位转换为rem单位。

通过以上步骤的配置，你就可以在ant-design中使用rem单位来适配不同的屏幕尺寸了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue2.x+vantd rem适配](https://blog.csdn.net/learn_daydayUp/article/details/120717585)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]