react+lib-flexible适配浏览器宽度配置
p.p1 { margin: 0; font: 12px "Helvetica Neue" }
p.p2 { margin: 0; font: 12px "Helvetica Neue"; min-height: 14px }
span.s1 { font: 12px "PingFang SC" }
主要是通过lib-flexible搭配px2rem,将设计稿中固定的px单位转换成根据屏幕大小自动计算的rem单位,达到屏幕适配的目的。
在此之前需要先搭建好react项目。接下来是安装下面的步骤配置flexible。
第一步,安装lib-flexible并在src/index.js中配置import 'lib-flexible/flexible';
npm install lib-flexible -save
第二步, 安装postcss-px2rem
npm install postcss-px2rem
第三步,配置px2rem
在config/webpack.config.js中配置
const px2rem = require('postcss-px2rem');
在getStyleLoaders函数中找到postcss-loader的配置项,加入px2rem({ remUnit: 192, remPrecision: 8 }),然后重启项目,在浏览器中检查页面的html和body标签都自动加入style属性,若有则表示成功了。
config/webpack.config.js修改处如下:
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
postcsspxtorem: {
"rootValue": 75,
"propList": ['*', '!border*'],
// 注意:如果有使用第三方UI如VUX,则需要配置下忽略选择器不转换。
// 规则是class中包含的字符串,如vux中所有的class前缀都是weui-。也可以是正则。
"selectorBlackList": ['ivu-']
},
remove: false
},
stage: 3,
}),
px2rem({
remUnit:192,
remPrecision: 8
})
],
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
p.p1 { margin: 0; font: 12px "Helvetica Neue" }
p.p2 { margin: 0; font: 12px "Helvetica Neue"; min-height: 14px }
span.s1 { font: 12px "PingFang SC" }
如果你是新建的项目,找不到config/webpack.config.js这个文件,这个时候就需要执行一下npm run eject,
该语句执行后会在项目中显示一下config和script文件夹,需要配置的webpack.config.js就在config文件夹中。由于我在这一步执行操作中出现报错Remove untracked files, stash or commit any changes, and try again.这里也跟大家分享一下处理方式。
参考资源:https://blog.csdn.net/weixin_41606276/article/details/85123919
当然,目前的配置满足大屏幕和小屏幕的适配,而在超大屏幕的使用上就显得不足,这是由于在插件源码中refreshRem方法提到当宽度大于540这个特定值时就不再有对应的适配,这里为了使其适配超大屏幕,需要将其中的if判断删除或注释。这里的操作与上一篇博文中的配置相同,这里就不在体现。
具体参考:https://www.cnblogs.com/min77/p/14434896.html
最新文章
- JSP 9大内置对象详解
- CF #374 (Div. 2) D. 贪心,优先队列或set
- linux php redis扩展的安装和redis服务的安装
- Javascript 笔记与总结(2-1)Javascript 与 DOM
- Python面试必须要看的15个问题
- win7下简单FTP服务器搭建
- QTreeWidget实现动态加载本地文件系统
- Unity快速接入SDK框架
- HEOI2016 题解
- Android注解神器 ButterKnife框架
- spring4配置文件详解
- PlugNT CMS v4.6.3 调用文章上一页和下一页及点击数加1
- HDU 3966 Aragorn&#39;s Story(模板题)【树链剖分】+【线段树】
- win10 下JDK10的下载安装与环境变量配置
- js 字符串加密解密
- React之使用Context跨组件树传递数据
- [Hbase]Hbase容灾方案
- myeclipse查询mysql出来的汉字是乱码
- 20155320 2016-2017-2《Java程序设计》第九周学习总结
- dubbo 微服务框架