next(react)框架结合lib-flexible，postcss-pxtorem做pc端rem适配解决font-size一直是54px

2021/8/7 23:06:28

编程Tag： rem 适配 width flexible lib PostCSS pxtorem 54px

本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

next(react)框架结合lib-flexible，postcss-pxtorem做pc端rem适配解决font-size一直是54px

安装lib-flexible，postcss-pxtorem

配置postcss-pxtorem

配置lib-flexible

最后

相关编程文章