移动端根据rem适配时，pc端调试器和手机显示效果不一致问题

Posted 2023-03-28

参考技术A

pc端调试只能看到最小12px的字号，但是手机上能看到更小。现在遇到的问题是，我这边根据rem进行适配，html为16px，所以当设置一个低于 0.8rem的字体时（0.8*16=12.8px），pc端的调试器显示就和手机上有很大区别了。
有什么解决方法么，就是能实现pc端调试和手机显示的一致性

原因是什么。就是因为pc端最小只支持12px的字号，下面的解决方案，看了你会笑的～～😂😂

解决方案:
浏览器设置最小显示字号即可

移动端适配

参考技术A 一. 元素的度量单位
1. px像素
2. em根据父元素来计算大小（项目中比较少用）
3. rem根据根节点(html)元素的font-size进行计算大小
4. vw/vh根据手机屏幕计算大小
5. rpx小程序特有单位
二. rem计算公式: 元素的宽度(高度)= html的font-size * rem
三. 使用rem进行移动端适配的原理
1. 以ipone6宽度作为参考,给它的根标签设置大小
2. 获取手机的屏幕宽度,根据屏幕宽度,以iphone作为参照物进行等比缩放

一. 用来根据手机宽度设置根元素字体的大小

二. px转成rem,免去我们手动输入rem

三. css的处理