Question

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

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

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

现在遇到的问题是：第一个div，font-size: 1em，（浏览器默认为16px）16 x 1 x 6 = 96px
第二个div，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;
}

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

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

Answer 1

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

这样：

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

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

Answer 2

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

Answer 3

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

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;
}

Updated Fiddle（中间的两个div）。

在ems中创建两个大小相等但字体大小不同的div

3 个答案: