使用rem调整样式时字体变大的问题

公司项目新增了对于不同dpr的支持,所有要修改以前的页面来适配
今天修改一个页面的时候遇到了一个很奇怪的问题

在html的font-size为75px的情况下,出现了某一段文字的字体大小比设置的大的情况
而且在手机上看,在安卓微信浏览器中比系统浏览器字号大! ios一样大

如图,字号设置为0.42rem 应该为31.5px,而实际显示为39.75px

clipboard.png

clipboard.png

如果我给这段加上white-space: nowrap; 这段就正常了,但是这么多字不可能不换行啊

clipboard.png

接着尝试,我把它上面的一段html去掉后,它就正常了,没有加white-space: nowrap;,去掉的html片段如下图

clipboard.png

这都是什么鬼哦,折磨我快一天了,大神们!

阅读 12.5k
6 个回答

应该把display设置成inline-block;就好了

在body或者html里写上-webkit-text-size-adjust: none;就可以了;
原因是当页面文字内容过多时,webkit浏览器自动放大字体,使用 -webkit-text-size-adjust:none设置一下,就不会影响了字体大小了

你在测测其他安卓机型,看看是不是都有这个问题,如果是的话:
根据你的描述,我也没有比较好的解决办法。不过你可你试一试,比如 font-size:75px; 计算过后是 指定元素 是39.75px ,那说明计算前的font-size应该是0.53rem。跟你设定0.42rem有冲突, 那你就改一下该元素的的大小比如 .3rem ,.2rem 。
如果都是计算后都是39.75px说明定义该元素的font-size肯定被其他地方给覆盖了,你就去找找看。
如果也是等比例的变化,而结果也不是你期望的,那说明问题出在了 font-size:75px上面,那你看看其他元素在计算后是否正确。
祝你好运!

新手上路,请多包涵

我也遇到同样的问题,你解决了吗?

新手上路,请多包涵

调试发现html跟字体设置无效

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题