next(react)框架结合lib-flexible,postcss-pxtorem做pc端rem适配解决font-size一直是54px
2021/8/7 23:06:28
本文主要是介绍next(react)框架结合lib-flexible,postcss-pxtorem做pc端rem适配解决font-size一直是54px,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
安装lib-flexible,postcss-pxtorem
1 yarn add lib-flexible 2 yarn add postcss-pxtorem
配置postcss-pxtorem
在根目录下建立postcss.config.js文件
1 const pxtorem = require("postcss-pxtorem"); 2 module.exports = { 3 plugins: [ 4 pxtorem({ 5 rootValue: 136,//我这里配置的是我1366分辨率下的基准值,会在下面解释 6 unitPrecision: 5, 7 propList: ["*"], 8 selectorBlackList: [/^\.nop2r/, /^\.am/,'html'], 9 //排除antd样式,由于我给html设置了min-width,所以把html也排除在外不做rem转换 10 replace: true, 11 mediaQuery: false, 12 minPixelValue: 0 13 }) 14 ] 15 }
配置lib-flexible
正常情况下我们在app.js中import ‘lib-flexible’就可以实现引入,但我在引入后启动项目,一直在报window is not defined,研究了很久才找到解决方法。
1 const setRem = async ()=>{ 2 await require('lib-flexible') 3 } 4 useEffect(()=>{ 5 setRem() 6 window.addEventListener('resize',setRem) 7 })
终于没有报错了!
在这种情况下适配移动端已经没问题了,可是pc端屏幕情况下用控制台查看元素,发现font-size一直是54px
1 <html data-dpr="1" style="font-size: 54px;">
解决方法:
修改node_modules\lib-flexible\flexible.js文件的refreshRem,可见原代码中width / dpr > 540的情况下默认不随width改变,我们把这段代码修改如下:
1 function refreshRem(){ 2 var width = docEl.getBoundingClientRect().width; 3 if (width / dpr > 540) { 4 width = width * dpr; 5 } 6 var rem = width / 10; 7 docEl.style.fontSize = rem + 'px'; 8 flexible.rem = win.rem = rem; 9 }
最后
根据设计图以及开发情况下的分辨率,修改postcss-pxtorem.js文件的rootValue值,正常是 分辨率宽/10
这篇关于next(react)框架结合lib-flexible,postcss-pxtorem做pc端rem适配解决font-size一直是54px的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist