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

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>元素的大小均不同的原因是，您要根据相对em单位来定义height ，该height是由当前font-size ，并且两个<button>元素都具有不同的font-size 。

当您说“ 必须使用em进行……响应大小调整”时 ，可以使用rem单元（即文档的“ root-em”），无论更改的font-size ，一个rem的大小始终相同任何后代元素。

例如：

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

 <button class="btn">First Button is 32px 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 2

em s与字体大小有关，因此，当您更改btn2的字体大小时，您将更改height: 4em计算btn2 。 如果您能够使用 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，btn高度的* 4为64px。 当您在btn2中更改字体大小时，您正在调整整个对象的em值，因此4 em的高度现在为1.5 * 16px * 4 = 96px。

除非您能够将按钮的em值与字体大小em分开设置，否则我认为如果不将4em手动减小为较小的值，您将不会成功，因此对btn2进行数学计算即可。 如果您希望保持一致的4em，那么我建议以某种方式嵌套元素，以便您可以在单独的元素上设置值。