最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

探究为何rem在chrome浏览器上计算出错-渴望做梦

来源:动视网 责编:小采 时间:2020-11-27 16:44:29
文档

探究为何rem在chrome浏览器上计算出错-渴望做梦

探究为何rem在chrome浏览器上计算出错-渴望做梦:最近在一个项目中,测试同学提了一个bug,说手机上有个页面的某些字体显示偏大。就像这样 我用chrome浏览器在pc上测试了一下,发现pc上也有这个问题,但是用其它浏览器打开这个页面就没有发现这个问题。 于是,上网百度了一下,发现原来是chrome浏览器
推荐度:
导读探究为何rem在chrome浏览器上计算出错-渴望做梦:最近在一个项目中,测试同学提了一个bug,说手机上有个页面的某些字体显示偏大。就像这样 我用chrome浏览器在pc上测试了一下,发现pc上也有这个问题,但是用其它浏览器打开这个页面就没有发现这个问题。 于是,上网百度了一下,发现原来是chrome浏览器
 最近在一个项目中,测试同学提了一个bug,说手机上有个页面的某些字体显示偏大。就像这样

我用chrome浏览器在pc上测试了一下,发现pc上也有这个问题,但是用其它浏览器打开这个页面就没有发现这个问题。

于是,上网百度了一下,发现原来是chrome浏览器的问题。

通过各种百度Google然后我总结了一下这个问题产生的原因:

chrome浏览器目前支持的最小的字体大小为12px,而我在html根元素上设置font-size:62.5%,计算之后就是10px,1rem=10px。

由于我页面字体大小都是按照10px的基数去算的,所以当chrome浏览器计算字体大小时就出现了出错。

解决方案:

又经过一番百度Google之后,总结了一下这种问题的解决方法。

网上提供的两种最多的解决方案就是

1、js方法

具体的字号根据你的项目来决定

2、css方法


将这个样式插入到head标签里面

这两种方式我都试用了,但是并没有效果,我也不清楚是怎么回事,如果有大神知道,还望不吝赐教。

所以,目前我认为最根本的解决方法就是,将html根元素的font-size大小设置为大于等于12px。

一些疑惑:

1、当1rem小于12px时,chrome是怎么计算的。

如上图所示,我的html根元素的font-size设置为62.5%(10px),图中字体计算的时候并不是25px,而是28.5941px,这个数是怎么来的,如果按照最小12px来算应该是30px才对啊。

2、为啥有的字体计算正确,有的出错。

如上图所示,同样设置为2.5rem的字体,有的能正确计算出是25px,有的却不行,这是怎么回事呢?

希望了解其中缘由的人能不吝赐教。

文档

探究为何rem在chrome浏览器上计算出错-渴望做梦

探究为何rem在chrome浏览器上计算出错-渴望做梦:最近在一个项目中,测试同学提了一个bug,说手机上有个页面的某些字体显示偏大。就像这样 我用chrome浏览器在pc上测试了一下,发现pc上也有这个问题,但是用其它浏览器打开这个页面就没有发现这个问题。 于是,上网百度了一下,发现原来是chrome浏览器
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top