1

基本的に、ここで提起されたものと同じ質問をしていますが、明確で直接的な答えは得られませんでした。そう。font-size /line-heightにパーセンテージを使用しないのはなぜですか?

現時点で私が知っている限り：

  1. 親に応じてフォントサイズを調整します。html明示的に設定されていない場合は、最終的にタグに到達するまで参照を検索します。
  2. また、親 div の font-size がパーセンテージに設定されている場合、その子段落もそれを考慮に入れる必要があります (その倍)。

回避策:

  • h1したがって、私の解決策は、や などのコンテンツ タグに対してのみパーセンテージ フォント サイズを設定し、それらを使用せずにタグをきれいにp保つことです。divその場合、サイズ変更時のベース フォント サイズをhtml制御すると、すべてのフォントを制御できます。

    • 利点：

  • これとの違いは、emブラウザの互換性です (これについてはよくわかりませんが、パーセンテージの方がems よりも優れているはずです)。

    • だから私の質問は：

    1. 誰かが以前にこれを試してあきらめた場合、その互換性はどうですか?
    2. これが一般的ではないのはなぜですか? また、考慮しなかったことは何ですか?
    4

    3 に答える 3

    0

    font-sizing にパーセンテージを使用してもまったく問題ありません。しかし、それらが Web でそれほど広く実装されていない理由は、EM、PX、PT、および最近の REM 単位のように、印刷用途に使用するように設計されていないためだと思います。

    互換性は、プロジェクトの要件によって異なります。最適な回避策は、次のように、html ルートまたは body 要素にパーセンテージを設定することだと思います。

    html {
font-size: 62.5%; /* Sets up the Base 10 stuff */
}

    基本要素がパーセンテージ値を使用して設定されている限り、フォントのサイズ設定に好きな単位を使用でき、関連するフォントサイズ設定の利点を引き続き保持できます。

    私の個人的な推奨事項は、代わりに REM を使用することです。これらは EM に似ていますが、カスケード ダウンする代わりに、常にルート要素に関連します。そして、それが相対単位（パーセント）で設定されている場合、常に最初に参照されます。ブラウザーのサポートは適切です (IE9 < ではサポートされていません) が、レガシー ブラウザーに PX ベースのソリューションをいつでも提供できるため、この手法が非常に効率的になります。設定するには、次のようになります。

    html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

    これが役立つことを願っています。基本的に、ルート要素にパーセントを指定するだけでよい場合、あらゆる場所でパーセンテージを使用する必要はありません。

    于 2013-06-12T10:44:51.947 に答える
    0

    実際、レスポンシブ デザインの未来は、body タグにパーセンテージ ベースのフォント サイズを適用するこの手法にあると思います。これは、真にプロポーショナルなグリッド システムとモジュラー スケールのタイポグラフィに関連するからです。

    アイデア - タイポグラフィのグローバル モジュラー スケールをモバイル サイズ設定で一度設定し、本文に 100% のフォント サイズを適用します。これには、ヘッダーの em (または rems) が含まれますが、段落 (p) は含まれません。p はボディからサイズを継承するため、そのままにしておきます。

    さらに、グリッド システムとメディア クエリ (およびその他すべてのマージンとパディング) も、パーセンテージ ベースのコンテナー幅で、完全に em / rems にする必要があります。

    次に、ブレーク ポイントを上に移動するときに、メディア クエリを使用して本文のフォント サイズのパーセンテージだけをターゲットにして増やし、コンテナーのパーセンテージ幅を調整します。

    このアプローチでは、改行ごとにすべてのヘッダーと p を調整するのではなく、フォント サイズを 1 回設定するだけで済みます。

    さらに、クライアントが大きすぎると言ったためにフォント サイズを変更する必要がある場合は、本文の font-size % を小さくして、1 日で終わります。

    モジュール スケールのタイポグラフィを設定するには、Grid Loverなどのツールを使用します。それは素晴らしい。

    この概念をよりよく理解するために、Trent Waltonはしばらく前に素敵な投稿をしました。

    于 2013-12-09T17:19:13.133 に答える
    0

    モバイル デバイスを考慮する場合の一般的なベスト プラクティスは、em を使用することです。モバイルの方がよく表示される傾向があり、Google で参照できる記事がいくつかあります。

    最近 px から ems に切り替えたばかりですが、今はフォント サイズを rem に切り替える予定です。rem は html ルートのフォント サイズから計算されますが、em は親から計算されるため、ネストされていると扱いにくい場合があります。

    お役に立てれば。

    于 2013-06-12T02:45:25.600 に答える