問題タブ [em]

3.5em: http://jsfiddle.net/yst9h/

56px: http://jsfiddle.net/yst9h/1/

その下にバーがある要素と、そのような読み込み中のテキストがあります。Chrome では、テキストはバーの上にきれいに収まり、親の 100% と読み込み中のテキスト シェア (幅 200px) のサイズになります。ただし、Firefox と IE では、フォントがはるかに大きく (!)、バーを越えて送信され、結果として位置がずれて見えます。ブラウザのすべての開発ツールは、フォントが正しいサイズであると報告し（明らかに人間の目には見えない場合）、どのブラウザにもズームレベルが設定されていません（さまざまなズームレベルもテストされ、スケーリングの違いに変化はありません)

これは私を非常に困惑させました。私が見逃したものを探して、関連するフォントの不一致の問題をすべて読んで、SOとグーグルを何度も読んできましたが、まだこれに出くわしていません。

これは簡単に修正できるものですか、それともフォント サイズを小さくするためにブラウザごとの CSS ルールと格闘する必要がありますか?

クライアントが 0.875em のタイトルを希望する Web サイトに取り組んでいます。

オンラインで確認したところ、最近のブラウザの基本 em 単位は 16px である必要があります。クロム開発者で text-size を 1em に設定すると、16px ではなく 12px に設定されます。

最初に設定body{font-size:100%}してみました。運がない。

16pxベースに戻すにはどうすればよいですか?

ありがとう！

レスポンシブ Web デザインについて、また、デザイナーが固定単位ではなく相対単位を使用する方法について、よく読んだことがあります。段落の最大幅など、これが私にとって完全に理にかなっている状況があります。しかし、ほとんどすべての記事で、これの主な利点はデザインがズームに適応することであると述べています。私の知る限り、ズーム時にすべてのブラウザがピクセル値もスケーリングします（Firefoxで「テキストのみをスケーリング」がチェックされていない限り）。これは、CSS ピクセルがデバイス ピクセルではないためです。

実際、CSSピクセルは「ほぼ相対的な」単位であるように見えます。これは、ピクセル密度の高いデバイスもそれらをスケーリングしているためです（仕様によると）。通常、彼らは係数 2 でこれを行います。

個人的には、すべてに相対単位を使用する必要がある理由がわかりません。ピクセルは同じ仕事をしているように見え、通常は「鮮明な」外観になります (サブピクセル レンダリングにつながらないため)。

どう思いますか？私は何か見落としてますか？

プロジェクトの奥深くで、フォントサイズでの em の使用に問題があります。さまざまなコンテキストで再利用しているマークアップ モジュールがいくつかあります。計算されたフォントサイズがさまざまなコンテキストで異なるため、常に頭痛がします。レスポンシブ デザインを使用しているため、em を使用することは私たちにとって重要です。したがって、フォントサイズのスケーラビリティは必須です。jsFiddle簡単な例を ご覧ください。フォントの拡大と縮小を維持しながら、状況にあまり依存しないようにするにはどうすればよいでしょうか?

I'm making a site that uses mainly rem units as font-size units, and also for other attributes (width, height, margins etc.) One of the functions in the site is that the #mainContent's size changes and this is done by changing the font-size in the html tag:

css:

javascript:

The problem is that when the #mainContent is re-sized, bootstrap's navbar size (not font-size) and modal font-size change even though I specify their sizes so they won't be affected:

How can I make sure only the #mainContent is affected and not all the other elements? Thanks

プロジェクトの計算値を使用する必要があります。CSS3calc属性を使用することをお勧めします。ただし、これは Android Webview ネイティブ ブラウザではサポートされていません。したがって、私が見つけた最も簡単な方法は、jQuery を使用してこの動作を処理することでした。

問題は、今回は px 値の代わりに em 値を使用する必要があることです。

これは機能しません。

その問題を処理するための（簡単な）解決策はありますか？

レスポンシブ フォント サイズに問題があります。全体のフォントサイズを 62.5% に設定し、h2 を 57px (つまり 5.7 em) に設定しようとしていますが、変更されません。パーセンテージについても同じです。Px を使用すると、変更されますが、もちろん、ページのサイズは変わりません。

pt を em に変換するにはどうすればよいですか? Photoshop を使用してテンプレートをデザインします。ソフトウェアのテキスト サイズは pt 形式です。次に、デザインの詳細を開発者に転送する必要があります。開発者は常にすべてのテキスト サイズを em 形式で指定する必要があります。変換についてはこちらのサイトhttp://pxtoem.com/を参考にしましたが、pxからemへの変換しかありません。現在、ベース フォントに 16 pt を使用しています。

私のもう 1 つの質問は、pt と px の間に違いはありますか? 1 インチあたりのポイント数と 1 インチあたりのピクセル数ではなく、pt と px の間に違いはありますか? 16ptサイズの高さを確認したため、高さ16pxしか表示されていません。

「em」を使用して、一部の div の幅を設定します。これらの div の上には、下にある他のすべての div と同じ幅を持つ別の div があります。以下の図を参照してください。

シンプルな jSFiddle: http://jsfiddle.net/QxvrR/

これは Firefox と Chrome で機能しますが、Safari (7.0) では上部の div が下の div よりもわずかに長くなります。最終的に、ブラウザーは em を px に変換します。Safari は非整数サイズの幅を処理できないようです (下のボックスは 38.4px)。

上記の例は、問題を示すために非常に単純化されています。誰かがpx次元に戻る以外に、これに対する解決策/回避策を持っていますか?