問題タブ [em]

CSS @media クエリを使用して、最初のレスポンシブ レイアウトをコーディングしています。を html に追加した<meta name="viewport" content="width=device-width">ので、厳密な一連のデバイス幅ベースのフォント サイズ レイアウトを作成しました。そして、私はemを使用して (願わくば) 最も一貫性のあるブラウザのサイズ変更をhtml, body {width/height:100%; font-size: 1em}.

私の最小のケースでは、< 0.5em の範囲の<h2>比較的小さなemにタグを配置したいと考えています。ただし、その量を下回ると、サイズが変更されなくなります。私が見ることができる唯一のオプションは、ピクセルに切り替えて、10px の小さな量を使用することです。

これについては、別の方法で考えてもよいのではないでしょうか。または、 emの仕様に何かが欠けているのかもしれません。アドバイスをいただければ幸いです。

私は新しいプロジェクトを開始していて、前に em を与えると思っていましたが、パディング、マージン、行の高さなど (フォント以外のもの) に em を使用すると、ブラウザーがそれらを適切に計算しないことに気付きました。

例：

Firebug を使用して、ピクセルを使用して要素をすばやく配置し、ピクセル サイズ/ベース フォントの式を使用してスタイルシートに変換しました。したがって、25px / 16px = 1.5625

ブラウザを更新すると、要素が数ピクセルずれていて、切り上げたり切り捨てたりする必要があるように見えます。

それは私だけですか、それとも他の誰かが気づいた、または解決策を持っていますか?

回答: ベース フォントが間違っていました!!

要素にa を設定するfont-sizeと、bodyそのサイズも 1em になりますか?

言い換えれば、もしそうなら：

1em を使用する場所はどこでも 16px になると確信できますか?

上記が正しい方法でない場合、他にどのように基本フォントを設定すればよいですか?

ベース フォントが正しい用語でない場合は申し訳ありません。この技術が何と呼ばれているのかわかりません。ブラウザのデフォルト スタイルを上書きするスタイルシートのリセットに似ていると思います。

次の CSS を使用します。

... * セレクターの属性は正常に機能します。これらはすべてのクラスに適用されます。ただし、font-size をそこに移動すると、テキストはティラノサウルスのような比率になります。これは、フォントサイズを個々のクラスから * クラスに移動することで確認できます: http://jsfiddle.net/NvTvr/8/

なぜこれが起こるのですか？

アップデート

したがって、これが進むべき道です。

...等。(カラークラス内でフォントサイズが指定されていません); http://jsfiddle.net/NvTvr/10/に見られるように

次の CSS を検討してください。

そして、このマークアップ...

<em>Gill Sans での表示はなぜですか? というか、なぜワイルドカードが<p>. すべてのタグが同じ「重み」を持っている場合、これでいくつかのロジックを確認できると思いますが、直感的には「バグ」のように思えます...そして、できるという点で、より多くのマークアップを作成する傾向がありますそれ<em>がフォントスタイルに特定の方法でのみ影響するとは思わないでください。

<em>要するに、特定の機能でのみ動作するような「修飾子」を持つ方法はありますか?

レスポンシブ ウェブデザインのテクニックを学び、レスポンシブな方法でウェブサイトをコーディングしようとしています。フレームワークはまだ使用したくありません。私の問題は、ems の div 幅がモバイルとデスクトップで異なることです。デスクトップで表示するh1と、div に収まりますが、モバイルでは収まりません。これはどちらの場合も同じであるべきではありませんか？すべてのサイズは em です。

ここに私のHTMLコードがあります:

CSS:

ライブ バージョンは次のとおりです: adamlamakomy.pl。皆様のご協力に感謝いたします。

次のCSSコードを検討してください。

そしてHTML：

問題は、 .h1-subクラスが変な幅を取ることです。body font-size 16px と container: 58.75em があり、これは 940px に等しいはずです。しかし、代わりに幅が 1234px になります。私の幅.h1-subは、1.3125em または 21px の font-size から計算されるという結論に達しました。

1em 値は body font-size だけでなく継承できますか? font-size もオーバーライドされている .main-headline クラスには何も起こらなかったことに注意してください。

事前に助けてくれてありがとう。