ボタンの高さを異なるフォントサイズで同じにする方法

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

を使用すると、条件にheightを定義しているので、両方の<button>要素は異なるサイズであることを理由があります現在のfont-sizeから決定された相対単位emの単位と、<button>の両方の要素とは異なるfont-sizeを有する。

あなたは「が＆hellipためemを使用する必要が言う一方で、あなたは、代わりに、ドキュメントの 『ルート-EM』ですremユニットを使用することができます応答サイジングは、1 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; 
 
}

<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の評価を変更するあなたがそれらをを使用することができればrem sがあなたののために、この問題を解決します：

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を保つために探しているなら、何らかの形で要素を入れ子にすることを提案して、別々の要素に値を設定することができます。