em和px的换算,哪里出问题了?

吴先森
  • 68

前端新手,今天在练习css时,发现一个问题:
我把body的font-size设为10或者是62.5,这时设置20em,不就是200px的意思么,可在浏览器里不是这样的,看代码:

<body>
  <div>
  </div>
</body>
body {
    margin: 0;
    padding:0;
    font-size: 62.5%;
}

body {
    background-color: #caebff;
}

div {
    width: 20em;
    height: 20em;
    background-color: red;
}

结果在浏览器上出现的是240px的红色正方形?不应该是200px么?多的40px是从哪里来的?
望指教,谢谢。

@changli 告诉我chrome因为最小只支持12px的中文,所以会有这样的问题。我突然想起来,确实是的。那么,我在body里让font-size:625%,是不是就能解决了呢?呃,看代码:

<body>
  <div>
    <p>测试</p>
  </div>
</body>
body {
    font-size: 625%;
    margin: 0;
    padding: 0;
}

body {
    background-color: #caebff;
}

div {
    width: 0.3em;
    height: 0.3em;
    background-color: red;
    font-size: 0.2em;/*因为body里是625%,所以字体太大,就调整了一下字体,但跟着div的宽和高都变了*/
}

本来是想实现宽高都是30px,但字体太大了,因为上面是625%,我就设置了一下字体,呃,字体是正常了,盒子的宽和高一下子就不对劲了。
像我上面代码这样的情况,应该怎么解决啊?

回复
阅读 1.3k
2 个回答

有的浏览器的默认最少字体大小是12px;低于12px都以12px对待

盒子之类非字体的尺寸建议还是用rem吧,因为em单位依赖于父元素,用作盒子尺寸的话,那父元素上font-size就没法用了,很不灵活。这点不如rem,直接在:root上挂个font-size就能跑,body上再重置下font-size就可以不受影响了。em还是建议专用于字体上会比较好。

宣传栏