react配置rem解決移動端適配問題

安裝相關的依賴

npm i lib-flexible --save
npm i sass-loader node-sass --save-dev
npm i postcss-px2rem --save

而後打開項目中 config/webpack.config.js 進行配置

 

 

 // 在配置文件中添加以下兩行代碼

// px2rem({ remUnit: 75 }) 的意思就是1rem = 75px 這個是根據750px設計稿來的，若是是620 的就寫 62

const px2rem = require('postcss-px2rem');
px2rem({ remUnit: 75 })

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

import 'lib-flexible'

在  public/index.html   文件裏把下面的這段代碼註釋掉

 

 

最後重啓項目，打開控制檯你講會看到，說明rem配置成功

修改配置後須要重啓，而後咱們在組件中寫單位直接寫 px，設計稿量多少就能夠寫多少了，舒服多了。