Question

我不能使按钮高度与不同的字体大小相同。我必须使用em作为高度和宽度来进行响应式设计。

以下是示例jsfiddle

CSS：

body{
  font-size:16px;
}
.btn{
  height:4em;
  font-size:1em;
}
.btn2{
  height:4em;
  font-size:1.50em;
}

HTML：

<button class="btn">First Button is 64px as expected</button>
<br><br>
<button class="btn2">Why this is not same height with first one?</button>

<p>
  How to make same height buttons with differnet font sizes ? 
</p>

Answer 1

两个<button>元素大小不同的原因是因为您根据相对height大小单位定义em，这是根据当前{{ 1}}，两个font-size元素都有不同的<button>。

虽然您说“必须使用font-size进行响应式调整，但您可以使用em单位，即”root-em“无论任何后代元素的更改rem如何，一个rem始终具有相同的大小。

例如：

font-size

let button1 = document.querySelector('button.btn'),
  button2 = document.querySelector('button.btn2');

console.log(button1.clientHeight, button2.clientHeight);
// 60 60 (in my browser, yours will vary, but both
// buttons should show the same size).

body {
  font-size: 16px;
  box-sizing: border-box;
}

.btn {
  height: 4rem;
  line-height: 4rem;
  font-size: 1em;
}

.btn2 {
  height: 4rem;
  line-height: 4rem;
  font-size: 1.50em;
}

Answer 2

em与字体大小相关联，因此当您更改btn2的字体大小时，您正在更改height: 4em评估的内容。 rem将为您解决此问题如果您能够使用：

body{
  font-size:16px;
}
.btn{
  height: 4rem;
  font-size:1em;
}
.btn2{
  font-size:1.50em;
  height: 4rem;
}

<button class="btn">First Button is 64px as expected</button>
<br><br>
<button class="btn2">Why this is not same height with first one?</button>

<p>
  How to make same height buttons with differnet font sizes ? 
</p>

Answer 3

您正在为字体设置ems，为高度设置ems。 'em'等同于当前的字体大小。它由你的初始体CSS设置为16px，因此1em = 16px，其中* 4表示btn的高度为64px。当您更改btn2中的字体大小时，您将整体调整该对象的em值，因此4 em的高度现在为1.5 * 16px * 4 = 96px。

除非你能够将字体大小与字体大小分开设置，否则我认为如果不手动将4em缩小到更小的值，你就不会成功，所以数学运算会在btn2上运行。如果你想保持一致的4em，那么我建议以某种方式嵌套元素，这样你就可以在不同的元素上设置值。

如何使用不同的字体大小使按钮高度相同

3 个答案: