問題タブ [em]

ゴールデン グリッド システムからズーム可能なベースライン グリッドを適応させてみてください: https://github.com/jonikorpi/Golden-Grid-System/blob/master/GGS.css

関連するCSSは次のとおりです（何かが欠けていない限り）：

私が理解できないのは、フォントサイズが大きくなると行の高さが小さくなるのはなぜですか?

独自のベースライン グリッドを作成しようとしていますが、このパターンになる方程式を推定することができないようです。

明らかにフォントサイズはクラシックの結果です

ターゲット ÷ コンテキスト = 結果

フォントサイズでその計算を行うと、うまくいきます。たとえば、h2 の場合:

26px ÷ 16px = 1.625em

しかし、その計算は行の高さではうまくいきません。

見知らぬ人は、.small クラスの行の高さが .large、h1、h2 の行の高さと同じである理由はまだあります...ただし、これは私の懸念事項の中で最も少ないものです。

jQueryMobile と PhoneGap を使用して、クロスプラットフォームのモバイル アプリを開発しています。私がターゲットにしている最初のプラットフォームは Android です。

Android アプリの場合、開発者はフォント サイズの単位として dp を使用することをお勧めします。DP は、密度に依存しないピクセルを表します。これを使用すると、画面密度に関係なく、フォントが画面上で同じ物理サイズ (インチ、センチメートルなど) になることを意味します。

それは素晴らしいことです。Android が要求するように、すべてを dp で指定すると、他のブラウザー プラットフォームはこのユニットをサポートするのでしょうか? 私はそうではないと思います。

フォントを物理的に絶対的なサイズに設定する古い方法 (または回避策) の何が問題なのか疑問に思います。

1. PT: 1 pt は 1/72 インチです。

物理的に絶対的なサイズですよね？それは本当であるには良すぎるように聞こえます。これが信頼性が高く、すべてのブラウザーとデバイスでサポートされている場合、他のことをする必要はありません。

2. EM: ドキュメントのフォントのサイズとして 1 つの em が定義されます。

だからPTは最初から絶対的な大きさ。フォント サイズの単位として em を使用すると、画面に合わせてドキュメントのフォント サイズを設定するだけで済みます (そのために Javascript を使用できます)。そして、他のすべてが em で指定されている場合、私は終了します。右？

3. jQueryMobile* その間、私は CSS メディア クエリを使用して画面の幅と高さと密度を検出し、それらを使用して要素の基本フォント サイズを設定しています。その後、すべてのフォントの寸法は em です。多くの投稿では、em はフォントにのみ使用する必要があると示唆されていますが、アプリやサイトがすべてテキストに関するものである場合、テキストを含むすべての要素で em で寸法を設定するのは理にかなっているのではないでしょうか?

4. または...

dp は「デスクトップ」ブラウザと iOS でもサポートされていますか? 編集：いいえ、そうではありません。

知恵をありがとう。

1emを要素に適用すると、ブラウザのデフォルト値（通常は16px）またはその親のフォントサイズ値が使用されます。しかしmargin-top: 1em、h1要素で（リセットスタイルシートを使用せずに、したがってh1がに設定されている）のようなものを使用すると、親要素がに設定されていても、font-size: 32px1emはに等しいことに気付きました。32pxfont-size: 16px

ただし、font-size：100％のようなものを使用します。不一致を解決します。

私は何が欠けていますか？

emの測定単位がmax-widthcssプロパティでどのように機能するかを誰かに説明してもらえますか？1920 x 1080の画面解像度で、max-widthを140emに設定すると、max-widthが100％に相当することがわかりました。

1em はすべてのブラウザーで 16px であるはずではありませんか?

私はこのCSSを持っています

IE8 では、ラベル要素の高さが、私が望んでいた 13.6 ピクセルに対して 12 ピクセルになります。

手伝ってくれてありがとう！

現在、次のようにいくつかのユーザーアラートをマークアップしています

有効なhtmlですが、これは意味的に有効ではないことを示唆する他の回答を見つけました。しかし、すべてのインスタンスで em/strong タグをネストすることは本当に問題なのでしょうか? 上記の例は、すでに強調されているもののサブセクションを具体的に強調するために、完全に合理的な使用法のように思えます。しかし、スクリーン リーダーはこれを本来の意味で解釈できますか、それとも混乱する傾向がありますか?

divやimgの境界線を含め、すべてのHTML要素のサイズを変更するために「em」を使用しようとしています。
しかし、border: .1em #000000 solid;私のdivの1つでcss：を使用すると、Google Chromeでは表示されませんが、FirefoxとIEでは表示されます。間違った使い方をしていますか？それともChromeのバグの1つですか？
とにかく、どうすれば修正できますか？またはそれを回避する他の方法はありますか？

そのため、基本フォント サイズを 10px に設定し、測定サイズとして em を使用してもうまくいかないことに気付きました。IE は 10px のベース フォント サイズに固執しないため、私のサイトは IE7/6 でちょっと爆発します...

これは、Firefox のスクリーンショットです。

そしてこれはIE7です：

それで、簡単な修正があるかどうかを知っている人はいますか？または、すべての em を px に変換する必要がありますか? もしそうなら、それを行う簡単な方法はありますか？

フォントサイズがPXユニットではなくEMユニットで指定されている場合、保守可能なCSSコードを記述できません。私は次のようなCSSコードを書くことに慣れています。

アイデアは、サイト全体の多くのページに、12ピクセルのフォントサイズである必要があるテキストがたくさんあるということです。特異性のルールを利用して、サイトの特別な領域で12pxのフォントサイズを上書きします。

上記のコードを次のように書き直したとしましょう。

上記のコードでpxをemに置き換えた場合、特定のルールの利点が失われることを理解しています。コードの3行目は、「10 em of 11 em of 12 em」と解釈されます。これは、「以前のすべてのルールをオーバーライドして、10 em of（デフォルトは何ですか？）」とはまったく同じ意味ではありません。私が言ったことは正しいですか？

編集私が言ったことが正しければ、「すべての要素にフォントサイズXを使用し、サイドバーにはフォントサイズYを使用する」などのフォントサイズルールをどのように記述しますか？

私のプロジェクトのレイアウトは em である必要があるため、いくつかのピクセル値を em 値に変換するコード行を私のプラグインに追加する簡単な方法を探しています。サイトにサードパーティのプラグインを追加したくないので、これを行う簡単な方法はありますか?

プラグイン自体とは関係がないため、ここにコードを投稿しません。

ありがとう。

例: 13px -> ??em