問題タブ [em]

私は現在、デザインで px ではなく em を使用するなど、さまざまなプラットフォームや解像度のメディア クエリを含む、アダプティブ/モバイル Web デザインを学ぼうとしています。コンテンツの横にあるナビゲーション/情報バー。

情報バーの幅を 16em に設定し (フォント サイズに応じて 16px に変換)、コンテンツの幅を calc(100% - 17em) に設定しました。これにより、ウィンドウをどれだけズームおよびサイズ変更しても、メニューとコンテンツの間に 1em のマージンが残るはずですが、最終結果は一致しません。

100% ズーム

25% ズーム

友達の画面

要素間のスペースはズーム レベルによって大幅に変化しますが、すべてが普遍的に「em」単位を使用し、フォント サイズは関連する要素間で変更されません。何が問題になる可能性がありますか？

情報:メディア クエリを使用して、ナビゲーションを水平方向の配置からサイドバーに移行しています。動作しているのは、照会されたバージョンです。CSS を参照するときは、この点に注意してください。私はそれを真剣に疑っていますが、それは問題の一部かもしれません...

HTML コード:

皆さん、メリー クリスマス、今年も危険な仕事に手を染めてしまいました。緑のボックスのランダムな 1 つを赤のボックスに変えようとしています。緑のストライプを生成するためにグラデーション パターンを使用しましたが、両方とも 3em であっても、赤いボックスは小さくなっています!!! 何のかかと!!!

私のcodepen取引を見てください： http://codepen.io/githubmaht/pen/jinHo

CSS ----->

完全に EM ベースになることについて、人々はどう考えているのだろうか? 個人的には、フォント サイズ、レイアウト、メディア クエリなど、ほぼ完全に賛成です。ユーザーの個人的な好みに関係することは、完全に理にかなっています。

ただ、javascriptだとピクセル以外は使いづらそうです。

たとえば、画面サイズが特定のサイズよりも大きいときに画像を追加したい場合は、HTML でこれを行うことができます。

または、js では、画面がメディア クエリのブレーク ポイントに到達したときに、何かを変更したい (おそらく要素を交換したい) 場合があります。ただし、CSS の EM と js のピクセルの奇妙な組み合わせになってしまい、ユーザーのフォント サイズがデフォルト以外の場合は一致しません。

それは理にかなっていますか？そして、誰か提案はありますか？おそらくEMフォントとレイアウト用のpx？しかし、それはEMの美しさの一部を失います...

あなたの考えを聞きたいです！

ありがとう

私は、PX ではなく EM を使用している Zurb Foundation (v4) を使用しています。

EM を使用して見つけた 1 つの欠点は、要素に $column-gutter によって設定されたマージン (例: 0.9375em) がある場合です。要素のフォント サイズが 1em ではない場合 (例: 0.875em)、この要素のマージンは小さくなります ( ems は font-size に相対的であるため)、フォント サイズが 1em である要素よりも。

したがって、2 つの要素が隣り合っている場合、両方の実際のマージン結果は矛盾しています。要素のフォントサイズが異なっていても、要素の余白を一定に保ちたいと思っています。（pxを使用せずに）それを達成するスマートな方法はありますか？

Chrome で em 単位を使用すると問題が発生します (バージョン 31.0.1650.63 m)。

以下の JSFiddle は、Chrome で正しくない出力を生成します (Firefox や IE と比較すると、緑色のボックスが大きすぎます)。

http://jsfiddle.net/rapik/j72aZ/

HTML:

CSS:

font-size: 0.1em問題は、em を 10 分の 1 にしないというルールにあるようです。代わりに em を最小値に設定します。どちらもこの魔法の最小値よりも小さいため、font-size: 0.1emとの間に違いはありません....font-size: 0.2em

これはバグですか、それとも何か間違っていますか?

この特定のケースは、「bbb」クラスのすべての値に 10 を掛けることで解決できます。しかし、私の場合はもっと複雑で、これが必要font-size: 0.1emです。

スケーラブルなコントロールを構築するために em 単位を使用しています。私のコントロールには、ルート div と複数の子要素があります。アイデアは、すべての値が em を使用して設定され、em の実行時のサイズがルート要素の font-size によって制御されるというものです。要素に font-size が定義されている場合、その要素はそれに依存します。

アイデアや提案をいただければ幸いです。

アップデート：

以下は、私が話しているさまざまな出力のスクリーンショットです。

私はしばらくの間この質問について疑問に思っていました.ピクセルバージョンとemバージョンを作成して、ズームインしたときの違いを比較しました-何もありませんでした. 私が読んだことのほとんどは、「スケーラビリティのために ems にする必要があります」のようなことを述べていますが、最新のブラウザはすべて正しくスケーリングされているため、今では議論の余地があると思います。CSS のベース フォント サイズを ems/rems に設定している限り、ピクセルで記述されたパディングとマージンは、em の場合と同様にスケーリングされます。何か不足していますか？

親 DOM 要素の em 値が非常に大きい状況があります。問題は、フォントサイズがはるかに小さい場合でも、すべてのインライン子要素がそれらの上に大きなマージンを取得することです。

ソース ( http://jsfiddle.net/rapik/w87m7/2/ ):

フォントサイズを変更せずにこのギャップを取り除くにはどうすればよいですか? また、要素の表示タイプを「ブロック」に変更したくありません。

行の高さを変更しようとしましたが、成功しませんでした。

PS ご参考までに、なぜこれが必要なのか: Chrome には、いつでも font-size が 6 ピクセル未満になるのを防ぐ「機能」があります。したがって、すべての値に 10 を掛けて、この問題が発生しました。対応する質問: Chrome で em 単位を使用する際の問題