2

我一直在阅读 ems，我明白为什么我们应该使用它们。

所以现在我正在尝试将它应用到我的布局中。在我的布局中，我有两个div彼此相邻。左边的有一个font-size: 1em;，第二个有一个font-size: 0.8em。

两者都div应该具有相同的大小和边距。（在这个例子中，它们是 6em 宽度，1em 边距）

现在我遇到的问题：
第一个div，with font-size: 1em，是（浏览器默认为16px）16 x 1 x 6 = 96px
第二个div，with font-size: .8em，是16 x .8 x 6 = 76.8px

看到这个JSFiddle，作为演示。

为了使两个 div 大小相等，但字体大小不同，需要此代码：

body {
    font-size: 1em;
}
div { 
    margin: 1em; 
    background: lightgreen;
    float: left;
}
.blue {
    width: 6em;
    height: 6em;
    clear: left;
    background: lightblue;
}
.small2 {
    font-size: .8em;
    width: 7.5em;    
    height: 7.5em; 
    margin: 1.25em;
}

这意味着我必须用 for 的样式覆盖我声明的一般div样式.small2。

这是要走的路，还是我正在监督更好的解决方案？

4

3 回答 3

3

尝试使用rems - 它们与 ems 具有相同的优势，但与<body>标签的字体大小相关，而不是包含元素。

所以：

.blue {
    width: [target size, in pixels]
    width: 6rem;
    height: [target size, in pixels]
    height: 6rem;
    clear: left;
    background: lightblue;
}

请注意，并非所有浏览器（IE8 和更早版本）都支持 rems，因此在使用它们时应该使用像素后备（如上）。

于 2014-02-27T19:17:53.380 回答
1

是的，就是这样，但是您应该简单地思考并忘记像素（它们与em单位没有定义的关系，只会在这里混淆）。如果您0.8em为某个元素保存字体大小并且希望它的尺寸​​等于另一个元素的尺寸（它从 继承其字体大小body），只需将值乘以 0.8 的倒数，即 1.25。

于 2014-02-27T19:43:24.317 回答
0

我找到了一个对我有用的解决方案。我保持父级的字体大小不变，而是更改子级的字体大小。

HTML：

<div class="blue"><p>blue</p></div>
<div class="small"><p>test</p></div>

CSS：

.normal {
    width: 6em;
    height: 6em;
}
.small {
    width: 6em;
    height: 6em;
}
.small p {
    font-size: .8em;
}

更新了 Fiddle（中间的两个 div）。

于 2014-08-31T09:16:22.740 回答