css - em 単位とパーセントの違いは何ですか?

Question

私はこのトピックに関する多くの記事を読み (そして Q&A を検索しました)、見つけましたが、em 単位とパーセントの違いが何であるかをまだ理解していません。ヘルプ？

PS私はこのコード例を見てきました：

p { font-size: 10px; }
p { line-height: 120%; }  /* 120% of 'font-size' */

それはどういう意味ですか？いったいなぜ行の高さをフォント サイズのパーセンテージ値に設定したいのでしょうか?

Answer 1

わかりましたので、答えをまとめることにしました。

• line-height のパーセンテージ値は、現在の font-size に相対的です。
• em 単位は常に font-size に相対的です。
• パーセントは文脈によって異なります。たとえば、font-size で使用されている場合、現在の font-size に相対的になります。高さの場合、それらは高さに相対的になります。
• 親タグのフォントサイズが「小」「中」「大」と宣言されている場合、これらの値はブラウザの設定に影響されるため、少し変化します。このコンテキストでは 1em =\= 100% です。1em は、設定を 100% よりも少し「小さく」または少し「大きく」するようです。ここでそれについて読んでください。

君たちありがとう。:)

Answer 2

1em = 100％、2em = 200％、1,4 em = 140％など。ただし、実際にはコンテキストに依存します。

1em「実際のフォントサイズと同じ」、2-「フォントサイズの2倍」を意味します。EMはユーザー設定に適応します。

親タグのフォントサイズが「小」、「中」、「大」と宣言されている場合、これらの値はブラウザの設定に影響されるため、少し変化します。ユーザーがクライアントのフォントサイズを「小」または「大」に変更1emすると、フォントが少し小さくなったり大きくなったりするようです100%。

さらに読む： https ：//kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent

Answer 3

通常、行の高さはフォント サイズの倍数です。実際、単位を指定する必要がない唯一の値です。

p { line-height: 1.2; } /* = 1.2em = 1.2*font-size = 120% of font-size */

line-height が font-size に比例している場合、固定の line-height を気にすることなく、フォントのサイズを簡単に変更できます。