最近在一个项目中，测试同学提了一个bug，说手机上有个页面的某些字体显示偏大。就像这样
我用chrome浏览器在pc上测试了一下，发现pc上也有这个问题，但是用其它浏览器打开这个页面就没有发现这个问题。
于是，上网百度了一下，发现原来是chrome浏览器的问题。
通过各种百度Google然后我总结了一下这个问题产生的原因：
立即学习“前端免费学习笔记（深入）”；
chrome浏览器目前支持的最小的字体大小为12px，而我在html根元素上设置font-size:62.5%，计算之后就是10px，1rem=10px。
由于我页面字体大小都是按照10px的基数去算的，所以当chrome浏览器计算字体大小时就出现了出错。
解决方案：
又经过一番百度Google之后，总结了一下这种问题的解决方法。
网上提供的两种最多的解决方案就是
1、js方法
<script type="text/javascript">document.body.style.fontSize = '1.6rem';</script>
具体的字号根据你的项目来决定
2、css方法
<style>body {font-size: 1.6rem;}</style>
将这个样式插入到head标签里面
这两种方式我都试用了，但是并没有效果，我也不清楚是怎么回事，如果有大神知道，还望不吝赐教。
所以，目前我认为最根本的解决方法就是，将html根元素的font-size大小设置为大于等于12px。
一些疑惑：
1、当1rem小于12px时，chrome是怎么计算的。
如上图所示，我的html根元素的font-size设置为62.5%（10px），图中字体计算的时候并不是25px，而是28.5941px，这个数是怎么来的，如果按照最小12px来算应该是30px才对啊。
2、为啥有的字体计算正确，有的出错。
如上图所示，同样设置为2.5rem的字体，有的能正确计算出是25px，有的却不行，这是怎么回事呢？
希望了解其中缘由的人能不吝赐教。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1002
