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

react+lib-flexible适配浏览器宽度配置的更多相关文章

  1. seleniumRC启动及浏览器实例配置

    一.firefox浏览器实例配置 1.启动用户配置文件管理器 重要:在启动用户配置文件管理器之前,Firefox必须完全关闭.     1)按 support.cdn.mozilla.net/medi ...

  2. JS实时监听浏览器宽度的变化

    boot:function(){ //加载页面时执行一次 changeMargin(); //监听浏览器宽度的改变 window.onresize = function(){ changeMargin ...

  3. 如何用jquery实现实时监控浏览器宽度

    如何用jquery实现实时监控浏览器宽度 2013-06-05 14:36匿名 | 浏览 3121 次 $(window).width();这代码只能获取浏览器刷新时的那一刻的宽度,如何才能达到实时获 ...

  4. 移动端页面利用好viewport,适配各种宽度屏幕

    最近研究微贷网的移动端代码,发现他们网站在适配不同宽度屏幕的显示情况时,发现他们并不是利用rem单位,而是利用js动态设置mete的viewport来达到适配的效果. 感觉挺不错的,也不需要计算什么东 ...

  5. easyui panel自适应浏览器宽度

    一.目标效果: 当浏览器窗口大小改变时.panel宽度始终为浏览器宽度的50%,panel高度则根据其中内容的多少而变化,横向竖向滚动条皆不出现.且不需要重新刷新浏览器或者其他js代码 兼容:chro ...

  6. jquery入门 动态调整div大小,使其宽度始终为浏览器宽度

    有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,不过我们也可以用jquery来实现. <!doctype html> <html> & ...

  7. jquery动态调整div大小使其宽度始终为浏览器宽度

    需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,下面是具体实现,大家可以参考下 有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点 ...

  8. scss牛刀小试:解决css中适配浏览器前缀问题

    在css中为适配浏览器,新特性总加 -webkit,-o, -moz 来适配浏览器,写的烦心,看着也臃肿,让css可读性降低,下面以阴影为例,如何使用scss让我们的css看起来更简洁. 本人使用的I ...

  9. CSS 布局实例系列(四)如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?

    Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是: 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 肯定有人心里犯嘀咕 ...

随机推荐

  1. kubernetes实战-交付dubbo服务到k8s集群(一)准备工作

    本次交付的服务架构图:因为zookeeper属于有状态服务,不建议将有状态服务,交付到k8s,如mysql,zk等. 首先部署zk集群:zk是java服务,需要依赖jdk,jdk请自行下载: 集群分布 ...

  2. Makefile 流程控制(error,warning)等调试选项

    1.退出码 0 ok1 错误2 使用了-q 选项 且目标不需要更新 返回2 2.选项 -f --file 指定makefile脚本 -n --just-print --dry -run -- reco ...

  3. css position sticky All In One

    css position sticky All In One css sticky & 吸顶效果 demo https://codepen.io/xgqfrms/pen/PoqyVYz ref ...

  4. 加密算法大全图解 :密码体系,对称加密算法,非对称加密算法,消息摘要, Base64,数字签名,RSA,DES,MD5,AES,SHA,ElGamal,

    1. 加密算法大全: ***************************************************************************************** ...

  5. MDN All In One

    MDN All In One https://github.com/mdn/ https://wiki.mozilla.org/MDN MDN 要凉了 https://developer.mozill ...

  6. Proxifier

    Proxifier 使用教程 https://www.proxifier.com/ Proxifier允许不支持通过代理服务器工作的网络应用程序通过SOCKS或HTTPS代理和链进行操作. confi ...

  7. Nestjs 修改dist目录

    修改tsconfig.json { "compilerOptions": { "outDir": "./server-dist", // 这 ...

  8. html5 useful skills blogs

    html5 useful skills blogs preload & prefetch https://www.30secondsofcode.org/snippet/ary blogs h ...

  9. 创建gitHub账户并配置秘钥

    1. 登录注册地址 https://github.com/ 2.点击注册 Sign up 3.输入邮箱 密码 进行注册 4.注册成功后,登录邮箱验证 .然后通过邮箱和密码登录gitHub.设置 set ...

  10. 前端监控SDK开发分享

    目录 前言 收集哪些数据 性能 错误 辅助信息 小结 客户端SDK(探针)相关原理和API Web 微信小程序 编写测试用例 单元测试 流程测试 提供Web环境的方式 Mock Web API的方式 ...