首页 > css em和百分比的困惑?

css em和百分比的困惑?

1.在google上搜了一些关于em的文章,多篇都提到了bodyfont-size设为62.5%,其它地方用em。但并没有讲为什么这样做。
62.5%.625em有区别吗?10px62.5%有区别吗?如果62.5%是为了计算方便,那么有些浏览器可能默认字体大小不是16px,那还方便个毛啊?

2.百分比到底是相对于什么?如下,此时对于text-indent来说,百分比相对于父元素的width;而对于font-size来说,百分比相对于父元素的font-size。WTF?不知道其它情况又是怎样的?

<div style="width:200px;font-size:16px"><p style="width:100px;text-indent: 50%;font-size: 100%;">Dophin</p></div>

然后看到一段话,是我目前最赞同的:

Use ems where you need something to scale with the font size of the
component, rems for something that scales with the base font-size and
pixels where you need an absolute value that doesn’t depend on the
font-size whatsoever etc. Different units have different purposes.
It’s that simple, really. I never got why people are so keen on doing
pixel math with ems. It made sense back in the day when IE6 was cool
shit, to overcome its zooming issues. It doesn’t make any sense now.


关于以下问题已自行找到答案,区别就在于如果为绝对单位(px),字体不能缩放;如果为相对单位(em),字体可以缩放。

10px62.5%有区别吗?


因为浏览器默认的字体大小是16px,16px * 62.5% = 10px

10px就方便于计算大小了,比如说18px就等于1.8em;如果不进行转化的话,就等于18/16 = 1.xxxem

仅仅是为了方便计算。不过使用em的时候,这些都是相对父元素的。


请问一下,我给body设置font-size:10px; 和 font-size:62.5%;,有什么不同吗?

【热门文章】
【热门文章】