高さやボーダー半径の測定にCSS em測定を使用するにはどうすればよいですか？

Question

「em」の測定値は、pxのような絶対単位で指定されている場合は、含まれている要素のfont-sizeを基準にしたfont-sizeの相対単位、またはブラウザのデフォルトのfont-sizeです。

しかし、div要素のようにbox要素のborder-radiusの測定値としてemを使用する方法を理解しようとしています。私はボックスの幅や高さの測定としてemを使用する方法に関係していると仮定しています。

まだフォントサイズに関連していますか？具体的にどのように測定されていますか？私が見つけた境界半径の計算方法の説明は、px単位に基づいているようです。

Answer 1

私はあなたの質問を誤解しているかもしれませんが、私はこのように動作すると思います。フォントサイズが12ピクセルで、ボーダー半径が1emのボックスを作成すると、ボーダー半径が12ピクセル（13ピクセルの場合は13ピクセル）になります。これは、テキストのサイズにかかわらず、テキストと同じ比率にとどまるためにボックスのボーダー半径が必要な場合に便利です。

<style> 
    // lets say the browser gives the text a default size of 16px on a pc 
    .box {border-radius:5px}// lets say the box's size scales with the text 
</style> 

ボックスがほぼ完全に丸い角を持っていたかのように見えます：あなたはそれでテキストを持つボックスを持っていた場合の瞬間のために、言うことができます。しかし、iPhoneで言うと、それはボックスが実質的に平坦なコーナーを持っているかのように見える、80pxのデフォルトサイズ（誇張）をテキストに与える。解決策は、ボックスの角をemでテキストに合わせることです。

Answer 2

font-sizeに関連しているようです。結局、それはまだpxのような測定の単位です。

このexampleは、どのように動作するかについての良いアイデアを提供します。

マークアップ：

<div id="A"></div> 
<div id="B"></div> 
<div id="text-height"></div> 
<p>Some text</p> 

<div id="C"></div> 
<div id="D"></div> 

CSS：

p { 
    line-height: 1em; 
    background: grey; 
    display: inline-block; 
    position: relative; 
    top: -4px; 
} 
#A { 
    height: 4em; 
    background: red; 
    width: 1em; 
    display: inline-block; 
} 
#B { 
    height: 2em; 
    background: blue; 
    width: 1em; 
    display: inline-block; 
} 
#text-height { 
    height: 1em; 
    background: green; 
    width: 1em; 
    display: inline-block; 
} 
#C, #D { 
    height: 4em; 
    width: 4em; 
    display: inline-block; 
} 
#C { 
    border-radius: 2em; 
    background: red; 
} 
#D { 
    border-radius: 1em; 
    background: blue; 
} 

画像：

Answer 3

ブラウザでこれを試してみました。it is still relative to the font-size property of the element font-sizeが定義されていない場合は、font-sizeを持つ次の親から継承するか、ブラウザのデフォルト値（which is 16px usually; TIL）になります。