脚本宝典收集整理的这篇文章主要介绍了vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,完美解决引入第三方样式变小的问题,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
最近公司的的项目赶,作为前端的小白懒出新的高度,使出专业的技能 --复制粘贴!!(改别人的代码也是煎熬)
我经常做一些H5页面,这样就会遇到适配这个头疼的问题,我分享下我用经常用到的适配方案:
这里就不细说了 有大神总结 ,或者自行百度。
都是大神们智慧的结晶。。。。。。仰望!!!!!
好了废话少说进入正题。
使用vue的小伙伴儿会用到淘宝的开源的适配方案flexible.js + rem + px2rem-loader 去轻松的完成适配,这也是我最喜欢的,但是使用这个方案时,你引入第三方库时 样式会变小。。?!!!
这个坑难的我不行,各种百度,各种想法,差一点就放弃了这个方案。
问题
变小的主要原因是第三库 css一依据 data-dpr="1" 时写的尺寸
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
这时我们使用的flexible引入时 data-dpr不是一个写死了的,是一个动态的;就导致这个问题
解决
我们可以把第三方库的css代码px统一扩大2倍,听起来很蠢对吧,我一开始也是折磨想的,有的小伙伴就该说这个的改多少,代码少就无所谓,可是代码不就的累死了。。。
我使用的地vscode这个编辑器有个扩展程序小叫 px-to-rem 这个可算是救世主了 他可以让你在2分钟改完所有的代码
第一步 下载 改默认配置
"px-to-rem.px-per-rem": 0.5, // 第一步 主要是让1rem 等于0.5px
全选你要改的代码 option+Z 快捷键。(windows我不知道)你会发现所有的px变rem
第二步 改默认配置
"px-to-rem.px-per-rem": 1, //第二步
然后在全选你要改的代码 option+Z 快捷键。(windows我不知道)你会发现所有的rem变px 这个px的值比是原来的2倍
OKok OK
以上是脚本宝典为你收集整理的vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,完美解决引入第三方样式变小的问题全部内容,希望文章能够帮你解决vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,完美解决引入第三方样式变小的问题所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。