标签：lib 适配 54px width rem flexible postcss pxtorem
安装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
标签：lib,适配,54px,width,rem,flexible,postcss,pxtorem 来源： https://www.cnblogs.com/jackal1234/p/15113621.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。