我是在两年前做vue+vant移动端适配的时候用的这个方案lib-flexible + px2rem-loader。
px2rem-loader可以把我们自己写的样式和vant中的css元素px
转成rem,结合lib-flexible 以此保证在不同移动端分辨率下vant的组件和我们自己写的样式的适配。
之前我参考的哪些网站找到的这个解决方案我忘记了,对不住那些大佬了
38FB73C1.jpg这里我找了几篇差不多的,实现方案就是这样:
https://blog.csdn.net/yusun1234/article/details/120349585
https://blog.csdn.net/weixin_40970987/article/details/107088368
虽然最终效果是实现了,也是这样配置的,但其实一直是有疑惑的。正好最近有做适配,抽空把我之前的遇到的问题重新梳理下。
一、为什么要和lib-flexible结合使用,是一定要结合?用自己的rem.js行不行?
我没看过px2rem-loader的源码,但是看过lib-flexible的源码,核心也是动态设置根节点font-size(考虑了设备像素比),那么我们引入自己手写的rem.js是不是也行?答案是可以的。
lib-flexible中的源码,这里的版本是修改了源码后的,为了适配pc
我们的rem.js
image.png
二、我们设置的根节点font-size
和lib-flexible
中设置的不一样,那么px2rem-loader
中remUnit
应该设置多少?
答案是remUnit
应该设置为项目中html
根节点的font-size
。
我们在其他教程上经常看到这样的描述:
并不是说按照这样设置是错误的,这里没错的原因是结合了
lib-flexible
,且lib-flexible
内部设置的根节点font-size
是width/10
。如这个例子,假设页面宽度现在是1920,
lib-flexible
计算的根节点font-size
为192正好和这里配置的remUnit:192
匹配。
三、为什么remUnit
应该设置为项目中html
根节点的font-size
?
首先px2rem-loader
的作用是在编译的时候将css文件中px部分除以配置的remUnit
并将px改成rem,这和我们在手写rem.js后手动将css元素px换算成rem的过程一致,因此remUnit
应该设置为项目中html
根节点的font-size
。下面我们验证下:
现有如下场景:设计稿宽度1920,设计稿中有个盒子,该盒子宽度20px
px2rem-loader + lib-flexible方案有如下过程:
remUnit
设置为192,1920分辨率下,lib-flexible
中根节点html font-size为1920/10= 192px。则编译后盒子宽度为:20/192 = 0.10416666666666667 rem。
在1920屏幕宽度下,该盒子实际表现的宽度为192px*0.10416666666666667 rem = 20px,其中192px是根节点font-size,换算正确。
px2rem-loader + 自定义rem.js方案有如下过程:
remUnit`设置为100,1920分辨率下,rem.js中根节点html font-size设置为100px【实际开发中,这样是为了好换算,没有设置10px是因为谷歌浏览器最小12px】。则编译后盒子宽度为20/100 = 0.2 rem。在1920屏幕宽度下,该盒子实际表现的宽度为100px*0.2 rem = 20px,其中100px是根节点font-size,换算正确。
以上说明,remUnit
应该设置为项目中html
根节点的font-size
,实际上px2rem-loader
是简化我们自己除以自己设定的根节点font-size的过程,以前没有这个loader
的时候都是自己手动计算的。
总结:在使用px2rem-loader给你的项目适配的时候remUnit应该设置为项目中html根节点的font-size,虽然也可以使用自己写的rem.js,但还是推荐搭配使用lib-flexible。
lib-flexible会自动在html的head中添加一个meta name="viewport"的标签,在计算根节点font-size的时候也考虑了设备像素比。若要同时适配pc需要更改lib-flexible源码。
若对你有帮助,请点个赞吧,谢谢支持!
本文地址:https://www.jianshu.com/p/f018f2526181,转载请注明出处,谢谢。
参考:
https://www.jianshu.com/p/c35ff10049b7
https://www.jianshu.com/p/79be33f2ce88
网友评论