美文网首页让前端飞web前端技术分享前端都会去了解的
在使用px2rem-loader给你的项目适配的时候remUni

在使用px2rem-loader给你的项目适配的时候remUni

作者: 阿巳交不起水电费 | 来源:发表于2022-08-24 17:23 被阅读0次

    我是在两年前做vue+vant移动端适配的时候用的这个方案lib-flexible + px2rem-loader

    px2rem-loader可以把我们自己写的样式和vant中的css元素px转成rem,结合lib-flexible 以此保证在不同移动端分辨率下vant的组件和我们自己写的样式的适配。

    38F9641B.gif

    之前我参考的哪些网站找到的这个解决方案我忘记了,对不住那些大佬了

    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

    image.png
    我们的rem.js
    image.png

    二、我们设置的根节点font-sizelib-flexible中设置的不一样,那么px2rem-loaderremUnit应该设置多少?

    答案是remUnit应该设置为项目中html根节点的font-size
    我们在其他教程上经常看到这样的描述:

    image.png
    并不是说按照这样设置是错误的,这里没错的原因是结合了lib-flexible,且lib-flexible内部设置的根节点font-sizewidth/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

    相关文章

      网友评论

        本文标题:在使用px2rem-loader给你的项目适配的时候remUni

        本文链接:https://www.haomeiwen.com/subject/nohogrtx.html