問題タブ [em]

この例では:

CSS

HTML

「toad」という単語は、16px (ブラウザの標準フォント サイズ) の 0.5 倍になりますか、それとも 2em (h1 のフォント サイズ) の 0.5 倍になりますか?

単純なコードですが、chromeフォントではサイズは常に12pxで、IEでは10pxです。12より大きいピクセルの場合は、変更してもかまいません。しかし、12未満のピクセルの場合、変更することはできません....これを修正するにはどうすればよいですか？

すべての要素に対して、 font-sizeをline-height設定するグローバルリセットがあります。inherit

についてhtmlは、明示的に定義します。

これは相対単位line-heightで設定されていることに注意してください。

についてh1は、異なるフォントサイズを定義します。

h1の親戚を継承することline-heightを期待してい1.25emます。結果の行の高さは80px（16×4×1.25）に等しくなります。

しかし実際には、h1のline-heightは等しいままです20px（これは、のと同じhtmlです：16×1.25 = 20）。

たとえば、次のHTMLがあります。

結果のスクリーンショット：

http://jsfiddle.net/M3t5y/5/

この問題を回避するには、継承するのと同じ値に明示的に等しいを定義する必要がありh1ますline-height。

その後、line-height正しくなります：

http://jsfiddle.net/M3t5y/6/

相対値が最初に絶対値に計算され、次に絶対値が継承されるように見えます。font-sizeまたは、要素のではなく、親のに関連して継承されている可能性がありfont-sizeます。

質問

1. なぜ親戚line-heightが正しく継承されないのですか？
2. 親ではなくline-height、要素の相対的な値として相対を継承するにはどうすればよいですか？font-size

PSタイトルにも同様の問題がある質問がありますが、詳細は異なります。

初期スケールのメタ属性を発見しました。

以前は、default.css を使用してすべてのスタイルとサイズ (フォントと要素) を定義していたので、デスクトップ コンピューターの画面領域に適切に表示されます。次に、電話またはタブレットを使用している場合は、メディアクエリまたは PHP を使用して phone.css または tablet.css を含めることができます。これにより、小さいデバイスのサイズのみが調整されます。

しかし、初期スケールの概念を認識したので、要素のサイズを制御する代わりにそれを使用する必要がありますか?

私が得ようとしている非常に重要な結果はこれです...私はフォントサイズを次のようにEM（またはREM）単位で定義するために使用します：

つまり、私の phone.css と tablet.css は、html 要素のフォント サイズのパーセンテージのみを調整し、他のすべての要素はすべての異なるデバイスに応じてスケーリングされます。ある程度、パディング、マージン、行の高さ、文字間隔でこれを行います。

初期スケールの導入により、フォント サイズのスケーリングに EM/REM 単位は関係ないということですか? もっと直感的な PX ユニットに固執できますか? そして、残りのスケーリング作業は initial-scale に任せますか?

emレスポンシブ サイトを作成しましたが、 を使用してフォント サイズを制御したいと考えています。

10px のベースを作成するために、本文のフォント ベース サイズを推奨どおり 64.5% に設定しました。

ただし、サイジングは問題ないように見えますが、ブラウザのサイズでは変わりません。私は何が欠けていますか？

http://jsfiddle.net/XaUz9/

この質問では:なぜ px ではなく em なのですか? 最高の投票の答えで、emは次のように定義されます。

em は絶対単位ではありません。現在選択されているフォント サイズに相対的な単位です。フォント サイズを絶対単位 (px や pt など) で設定してフォント スタイルをオーバーライドしていない限り、これはユーザーのブラウザーまたは OS でフォ​​ントを選択した場合に影響を受けるため、意味がありません。フォントサイズの拡大縮小に合わせて拡大縮小する必要がある場合を除き、em を長さの一般的な単位として使用します。

何かのサイズを現在のフォント サイズに依存させたい場合は、em を使用します。

私の Web サイトのホームページでは、ページのヘッダー (Web サイト名) に font-size が 2.1 emのh1タグがあり、font-size が 1.9 em のh2タグよりも小さいようです。次のスクリーンショットは、Google Chrome ブラウザーを使用した状況を示しています。

私の質問は: em定義で考慮される現在のフォントサイズはどういう意味ですか? 言い換えれば、現在のフォントサイズをどのように知ることができますか?