vue使用postcss适配在chrome下浏览器字体偏大

最近被适配搞的头疼,设计图基于1920,vue项目用postcss适配后网页在ie和Firefox下正常比例缩小,文字一放到chrome上就乱了,元素检查对比了好几遍尺寸确实缩放的一样,比如某字体大小在postcss处理后都是font-size:.792vw,但chrome显示目测看上去的文字确实比正常的要大!???。
在百度查了很久,貌似只有一个人提问,只有提问没人回答!!!

以下是尝试过的方法:
①直接在浏览器调试font-size尺寸,发现14px及继续调小视觉显示效果一样大

②单位大写PX使postcss忽略处理某个设置,但是发现只对div什么的可以这样做,对font-size也可以忽略被转换单位,但谷歌上div什么的调整效果显示正常,只有font-size视觉效果!不正常!!!

③偶然发现chrome的缩放被调成了110%,好吧,我调回100%,但并没有什么卵用。之后尝试了一下,chrome缩放80%,哦,网页差不多正常了,但我不能跟每一个用chrome打开网页的人说你把缩放调80%再看网页吧?

以下是惨不忍睹的对比效果(1920放在1280频幕显示,1280下火狐和谷歌的效果),等找到方法继续跟新
一、FireFox
在这里插入图片描述
二、chrome
在这里插入图片描述
解决方法:暂未找到
查阅网上资料说是chrome浏览器的特性,想了解原理的参考一下这篇(本人没看懂( ╯□╰ ),)https://www.cnblogs.com/beileixinqing/p/6377399.html
最终处理结果:没办法,只能老老实实加了一套媒体样式,用@media处理

总结:
①postcss-px2rem(也就是postcss-pxtorem)可以帮我们将px单位自动换算成rem,按设计稿放心大胆的写px吧。
②postcss-px-to-viewport是根据视口大小进行缩放(移动端好理解,对pc端是根据浏览器窗口大小,不是你的设备屏幕大小!!!)
③折腾半天,发现一个奇怪的现象,无论是用上述插件自动转换成rem或vm,只有在谷歌上font-size显示不正常(偏大),使用插件后就算后期加@media控制font-size,控制台检查尺寸数值正常,显示就是偏大,唉~~

猜你喜欢

转载自blog.csdn.net/weixin_43939111/article/details/112243843
今日推荐