rem单位计算的问题

zhiqiang21
  • 1.4k

我是用rem 单位布局在iphone6的设计稿,设置根节点的font-size:62.5% 然后其它元素的宽高计算应该都是设计稿的尺寸除以2除以10(实际上就是除以20)就是rem的尺寸,但是在chrome61版本下在chrome 的开发这工具中预览计算的尺寸确是有问题的。不知道是什么原因。

为了解决这个问题我已经设置了浏览器的可以显示的最小字体

预览计算的尺寸如下图

回复
阅读 2.6k
3 个回答

如果想得到正确的单位值,可以使用100px作为基准值,也就是:

html {
  font-size: 625%;
}

下面解释一下:
关于博主提出的这个问题,确实是谷歌浏览器的限制,默认的font-size16px62.5%就是10px。但是谷歌浏览器会把小于12px的基准单位自动以12px计算,因此,5rem就是60px。因此,想要解决这个问题,就要让基准值大于12px,为了便于计算,就采用了100px,也就是625%

翻滚的猿
  • 117

就单纯按chrome来讲是没错的,因为浏览器默认font-size16px, 62.5%10px(chrome字体限制最小为12px,就算实际没有12px, 在chrome上也会默认为12px), 那么5rem 就是 60px

而且我不明白你为什么是除以20来获得rem的值,5rem只是说明他的大小是根元素的5倍,你只要把根元素按照你的设计稿算好,其他就按倍数设置就好

spencerht
  • 7.8k

看上去是web的chrome的最小字号限制为12号导致的。

补充:
在chrome设置下的最小字号好像也只能为10px,也就是说在根目录html节点font-size: 10px时,5rem的宽度为50px。

clipboard.png

宣传栏