7

ブラウザ/画面のサイズ変更でレイアウトが拡大縮小するFluid +レスポンシブレイアウトを作成しています。

私が パーセンテージで使用する場合、それはすべてのものに使用するfont-sizeのに適しています。body%em

  • font-size
  • width
  • margin
  • padding
  • border-width
  • border-radius

または私はemのみを使用する必要がありますfont-sizeか？

私の目標は、スケールアップとスケールダウンの際にすべてのバランスを維持することです。

emいつ使うべきか、いつ使うべきか少し混乱してい%ます。私font-sizeの体は62.5%

4

2 に答える 2

2

emすべてのブラウザーがズーム機能をサポートするようになる前は、アクセシビリティの優れた方法と見なされていました。現在、特定のシナリオ (おそらくあなたのシナリオ) で相対的なフォント サイズを簡単に宣言するのに最も役立つことがわかりました。

一部のブラウザーは、またはパーセンテージ計算から派生した浮動小数点値を文字通り使用しようとし、結果があいまいになるため、相対的なサイズ変更では境界線で美的に満足のいく結果が得られないことがわかりました (試してみてください)。em

私はほとんどのレイアウトでパーセンテージを多用しています。いくつかの一般的なパーセンテージ ベースのスタイルが、多数のレイアウト ニーズ (50/50 分割、33/67、25/75 などのスタイルなど) をカバーできることがわかりました。

個人的には、パーセンテージの方が直感的に扱えると思います。幅が 100% の要素は、常にその親の 100% を占有し (もちろん、適切なボックス サイズで)、コードでそれを読み取るのは簡単です。幅が 15em の要素は、親要素の 50% または 150% を占める場合があります。それは直接明らかではなく、追跡するのが難しいと思います（しかし、それは私だけかもしれません）。

ここにいくつかのベースライン スタイルがあります。これらはすべてのブラウザ/デバイスでテストされたわけではありませんが、本番アプリケーションで使用されています:

* {
    border-style: none;
    border-color: inherit;
    border-width: 0;
    padding: 0;
    margin: 0;
    vertical-align: baseline;
}

BODY {
    font: 11px/1.5 "Trebuchet MS", Arial, Verdana, sans-serif;
    color: #404040;
    background-color: #fff;
}

H1 {
    font-size: 1.8em;
    margin: .1em 0 .1em 0;
    color: #2B265B;
}

H2 {
    font-size: 1.6em;
    margin: 0 0 .25em 0;
    color: #303030;
}

H3 {
    font-size: 1.4em;
    margin: 0 0 .25em 0;
    color: #3b5998;
}

H4 {
    font-size: 1.2em;
    margin: 0 0 .1em 0;
    color: #666;
}

P {
    margin: 0 0 1.5em 0;
    font-size: 1.1em;
}

INPUT, SELECT, TEXTAREA {
    border-style: solid;
    vertical-align: middle;
    margin: .2em 0 .2em 0;
    border-radius: .3em;
    -moz-border-radius: .3em;
}

INPUT[type="text"], INPUT[type="password"]{
    border-color: #85a3bf;
    width: 16em;
    padding: .2em;
    border-width: 1px;
}

INPUT[type="file"] {
    border-color: #85a3bf;
    width: 32em;
    padding: .2em;
    border-width: 1px;
}

INPUT[type="text"]:focus, INPUT[type="password"]:focus, TEXTAREA:focus {
    border-color: #0066cc;
}

INPUT[type="submit"], INPUT[type="button"] {
    border-color: #DDDDDD #BBBBBB #999999;
    border-width: 1px;
    background: #eee url([URL]) repeat-x;
    padding: .2em .8em .2em .8em;
    text-shadow: 1px 1px #fff;
}

INPUT[type="submit"]:hover, INPUT[type="button"]:hover {
    background: #eee url([URL]) repeat-x;
}

INPUT[type="submit"]:active, INPUT[type="button"]:active {
    background: #eee url([URL]) repeat-x;
}

INPUT[type="checkbox"], INPUT[type="radio"] {
    margin: 0px .5em .1em .5em;
    vertical-align: middle;
}

INPUT[type="image"] {
    border: 0;
    margin: 0;
}

SELECT {
    padding: .1em;
    border-width: 1px;
    border-color: #DDDDDD #BBBBBB #999999;
    background: #eee url([URL]) repeat-x;
}

TEXTAREA {
    border-width: 1px;
    border-color: #85a3bf;
    padding: .3em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
于 2012-01-01T08:13:46.630 に答える
1

私のプロジェクトでは、次のようにします：

  • ブラウザのデフォルトのフォント サイズは 16px です
  • 設定html { font-size:100.01%;}。0.01% は四捨五入の誤差を減らします。サイズ変更によってテキストが非常に小さくなる場合がある問題を解決するための一般的な「まとめ」
  • このツール: http://pxtoem.com/を使用すると、問題なく px を ems に簡単に変換できます。
  • を設定するbody {font-size: 75%;}と、16 の 75% が 12 であるため、フォント サイズは 12px になります。

px は、ページのセクション、マージン、パディングなど、ページの一般的なレイアウトに最適です。px の問題は、特に「最小、小さい、通常、大きい、大きい」テキスト スケーリングを持つ IE6 のようなブラウザでは、px 単位のフォントのサイズが変更されないことです。ただし、フル ページ ズームの出現により、このテキスト スケーリングは必要ありません。昔と違って、ページのズーム、コンテンツとテキスト。

em は、テキストのパディングとマージン、およびテキストのフォント サイズに最適です。IE テキスト スケーリングの場合、ems DO はそれに応じてサイズ変更します。

パーセント？私はそれらを使用しないか、場合によってはほとんど使用しません。

于 2012-01-01T09:40:49.817 に答える