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

前端新手,今天在练习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%,我就设置了一下字体,呃,字体是正常了,盒子的宽和高一下子就不对劲了。
像我上面代码这样的情况,应该怎么解决啊?

阅读 2.2k
2 个回答

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏