网页适配
一般都使用pxtorem,源代码用的是px单位进行布局,但是运行起来以后,使用rem进行解析。
启动项目用的是webpacki或wite,所以这个插件是运行在打包工具中==>就是给webpack或wite做配置。
默认使用react脚手架创建的项目,是没有webpack的配置文件,需要执行命令,创建配置文件:
npm run eject
命令运行完成后,会创建一个config文件夹,其中就包含webpack的配置文件webpack.config.js,就可以对webpack做配置了。
适配方案1:
1.下载插件
npm i postcss-pxtorem amfe-flexible
2.在index.js 中引入
3.在webpack.config.js里面引入
require('postcss-pxtorem')({
rootValue: 150,
unitPrecision: 3,
propList: ['*'],
exclude: /(node_module)/,
mediaQuery: false,
minPixelValue: 1,
})
4.适配完成!效果如下