問題タブ [em]

私のサイトは、ほとんど完全に「em」(px ではなく) で設計されています。最新のブラウザでははるかに優れているはずです。

ほとんどのテキストは font-size:1em です。デフォルトでは 1em = 16px で、特に指定はしていません。

しかし、font-size が 1.2em のコンテンツと 0.8em のコンテンツがあります (たとえば、H1 や小さなボタンの場合)。

「em」の問題は、要素のすべてのサイズ (マージン、パディング、高さ...) をフォント サイズに応じて再スケーリングすることです。

CSS に特定のコードがあります。

通常ボタンには 1x1x16 = 16px の余白があります。ただし、小さいボタンには 1x0.8x16 = 12.8px の余白があります。

どうやらこれは、要素のフォントサイズに従ってすべてをスケーリングする特定の「em」プロパティです（「px」には当てはまりません）。

この例は単純です。しかし、私のウェブサイトでは、一貫性を保つことが非常に難しくなっています。

上記の例で 2 つのボタンのマージンが同じになるように、このプロパティを無効にするにはどうすればよいですか? （サイズを再計算することなく、これが私が今していることです！）

emレスポンシブ デザインにユニットを使用する方法を理解しようとしています。これらのページから私が理解したのemは、相対的な単位です。本文のフォント サイズを定義すると、1em に等しくなります。しかし、私はまだ混乱しています:

1. em私のレスポンシブデザインでの使用方法、つまり、ユニットページを使用すると%、それに応じて幅が調整さemれます。同じことをどのように使用できますか。

2. どれが良い%かem。

実際、em を使用してページを完全にレスポンシブにする方法がわかりません。いくつかのリンクや小さなデモで私を助けていただければ幸いです.

私は em をよく読んでいて、em を使うべき理由がわかりました。

だから今、私はそれを自分のレイアウトに適用しようとしています。私のレイアウトでは、div隣同士に 2 つあります。左のものには がfont-size: 1em;あり、2 番目のものには がありfont-size: 0.8emます。

どちらdivも同じサイズとマージンを持つ必要があります。(この例では、幅 6em、余白 1em です)

今私がぶつかる問題:
最初divの withfont-size: 1emは (ブラウザのデフォルトでは 16px) 16 x 1 x 6 = 96px
2 番目divの withfont-size: .8emは16 x .8 x 6 = 76.8px

デモンストレーションとして、このJSFiddleを参照してください。

両方の div のサイズを同じにするには、異なるフォント サイズを使用するには、次のコードが必要です。

つまり、で宣言した一般的なスタイルをdivのスタイルでオーバーライドする必要があります.small2。

これは進むべき道ですか、それとも私はより良い解決策を監督していますか?

タイトルが示すように、フォントだけでなく、ページのすべての要素で、古いブラウザーの px フォールバックを使用して REMS を使用して実験しています。テスト Web サイトは test.glow-sticks.org です。

以下の用語のいずれかが正しくない場合はお詫び申し上げます。私は専門家ではありません。

1024 を超える解像度では、(css 内の html) を使用するフォントサイズは 62.5% に設定されているため、単純に 1rem = 10px です。この解像度では、デフォルトのフォントを 1.4rem / 14px にしています。

1680 を超える解像度では、html css は 71.4% に設定されます。このパーセンテージを設定すると、フォントは 14px から 16px になり、もちろんすべての要素が同じパーセンテージで増加します。これは非常にクールで、すべてが完全に同期しているように見えます。

私のコンピューターでは、これまで使用してきた他の多くのテスト プラットフォームと同様に、これは完全に機能しているようです。ただし、私の Web 開発者は自分のマシンで問題に遭遇しているようですが、クロムでのみです。(firefox と IE は影響を受けません)

彼女のマシンでは、解像度を (ネイティブの 1920 から) 1024 に下げると、Web サイトは水平スクロール バーで読み込まれますが、私のマシンでは 1024 で問題なく収まります。クロム検査要素ツールを使用すると、より興味深いものになります。特に Div id=wholepage の 1 つの DIV をチェックしています。1024 画面で表示する場合は幅 960 ピクセル、1680 以上で表示する場合は幅 1097 ピクセルである必要があります。

ただし、彼女の Chrome では、div=wholepage は 1024 解像度で 1152px を表示し、ネイティブの 1920 解像度で 1152px も表示しています。

私のバージョンの Chrome では、同じものを再現するには font-size を 75% に設定する必要があることに気付きました。font-size をページ全体の div に設定しても、1152px にしたいようです。私は 10% を試してみましたが、私のクロムではまったく問題なく、すべてが小さくなりましたが、彼女のマシンでは何も変わりませんでした。変更される唯一のことは、font-size が 10% と表示されていることですが、それは尊重されていないかのようであり、最小で約 75% 上書きされています。

誰でもこれを再現できますか？

彼女が思いつく唯一の修正は、62.5 や 71.4 と同じ増加率を提供する 90% や 103% などのより高いパーセンテージを使用することです。ベースは62.5。

em 単位に問題があります。navlist の幅を 100px に相当する 6.250em に設定しましたが、正常に動作しています。各 li の幅を 6.250em に変更すると、navlist と同じ幅にはなりません。これはなぜ起こり、どうすれば修正できますか?

CSS コード:

HTML コード:

JSFiddle ここ: http://jsfiddle.net/2ZT9w/1/

1000 文字間隔は 1 em に相当します。したがって、数学 -100/1000px を使用すると、-100 文字間隔は -0.1em に等しくなります。

Dreamweaver のエクスポートがイラストレーターのデザインと一致しない理由がわかりません。まだまだ間隔が空いています。

私は72pxのフォントを使用しています..