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

我不能使不同字体大小的按钮高度相同。我必须使用em的高度和宽度的响应设计

下面是一个例子

CSS:

HTML:

第一个按钮按预期为64px



为什么这个高度和第一个不一样？

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

em

s与字体大小有关，因此当您更改

btn2

的字体大小时，您正在更改

高度：4em

的计算结果

rem

s将为您解决此问题如果您能够使用它们的话：

正文{
字体大小：16px；
}
.btn{
身高：4rem；
字号：1em；
}
.btn2{
字号：1.50em；
身高：4rem；
}

第一个按钮按预期为64px



为什么这个高度和第一个不一样？

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

em

s与字体大小有关，因此当您更改

btn2

的字体大小时，您正在更改

高度：4em

的计算结果

rem

s将为您解决此问题如果您能够使用它们的话：

正文{
字体大小：16px；
}
.btn{
身高：4rem；
字号：1em；
}
.btn2{
字号：1.50em；
身高：4rem；
}

第一个按钮按预期为64px



为什么这个高度和第一个不一样？

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

两个

元素大小不同的原因是，您根据相对

em

大小单位来定义

高度，该单位由当前
字体大小
确定，并且两个
元素的
字体大小
不同

当您说“必须使用
em
进行响应性大小调整”时，您可以使用
rem
单元，它是文档的“根em”，一个
rem
将始终保持相同的大小，无论任何子元素的
字体大小如何更改

例如：


let button1=document.querySelector（'button.btn'），
button2=document.querySelector（'button.btn2'）；
控制台日志（按钮1.clientHeight，按钮2.clientHeight）；
//60（在我的浏览器中，您的浏览器会有所不同，但两者都有
//按钮应显示相同的大小）。
正文{
字体大小：16px；
框大小：边框框；
}
.btn{
身高：4rem；
线高：4rem；
字号：1em；
}
.btn2{
身高：4rem；
线高：4rem；
字号：1.50em；
}
第一个按钮按预期为32px




为什么这个高度和第一个不一样？

如何使用不同的字体大小制作相同高度的按钮？
两个
元素大小不同的原因是，您根据相对
em
大小单位来定义
高度，该单位由当前
字体大小
确定，并且两个
元素的
字体大小
不同

当您说“必须使用
em
进行响应性大小调整”时，您可以使用
rem
单元，它是文档的“根em”，一个
rem
将始终保持相同的大小，无论任何子元素的
字体大小如何更改

例如：


let button1=document.querySelector（'button.btn'），
button2=document.querySelector（'button.btn2'）；
控制台日志（按钮1.clientHeight，按钮2.clientHeight）；
//60（在我的浏览器中，您的浏览器会有所不同，但两者都有
//按钮应显示相同的大小）。
正文{
字体大小：16px；
框大小：边框框；
}
.btn{
身高：4rem；
线高：4rem；
字号：1em；
}
.btn2{
身高：4rem；
线高：4rem；
字号：1.50em；
}
第一个按钮按预期为32px




为什么这个高度和第一个不一样？

如何使用不同的字体大小制作相同高度的按钮？
您正在为字体设置ems，为高度设置ems。“em”等同于当前字体大小。它由您的初始主体CSS设置为16px，因此1em=16px，即btn高度的*4为64px。在btn2中更改字体大小时，将调整该对象作为一个整体的em值，因此4em的高度现在为1.5*16px*4=96px

除非您能够将按钮的em值与字体大小em分开设置，否则我认为如果不手动将4em减小到更小的值，那么在btn2上进行计算，您将不会成功。如果您希望保持4em的一致性，那么我建议以某种方式嵌套元素，以便您可以在单独的元素上设置值。
您正在为字体设置ems，为高度设置ems。“em”等同于当前字体大小。它由您的初始主体CSS设置为16px，因此1em=16px，即btn高度的*4为64px。在btn2中更改字体大小时，将调整该对象作为一个整体的em值，因此4em的高度现在为1.5*16px*4=96px

除非您能够将按钮的em值与字体大小em分开设置，否则我认为如果不手动将4em减小到更小的值，那么在btn2上进行计算，您将不会成功。如果您希望保持4em的一致性，那么我建议以某种方式嵌套元素，这样您就可以在单独的元素上设置值。
尝试为它们提供相同的宽度是的。当您提供相同的宽度时，它将按预期工作。但是为什么呢？这是虫子吗？此处已更新，正在运行。两者的宽度和工作方式与预期相同。这是因为你正在使用em，这取决于字体大小。是的。当你使用相同的宽度时，字体也一样。试着给两种字体相同的宽度是的。当您提供相同的宽度时，它将按预期工作。但是为什么呢？这是虫子吗？此处已更新，正在运行。两者的宽度和工作方式相同
body{
  font-size:16px;
}
.btn{
  height:4em;
  font-size:1em;
}
.btn2{
  height:4em;
  font-size:1.50em;
}

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