3

最近、フォントサイズの単位として rem を使用する場合、どのフォールバックが最適か疑問に思っていました。ピクセルが適切と思われますが、特定のメディア クエリでグローバル フォント サイズを変更する場合は、すべてのピクセル ベースのフォント サイズを再定義する必要があります。

以下に例を示します。古いブラウザのフォールバックがなければ、使用できます

/* Mobile Styles */

html { font-size: 1rem; }
h1 { font-size: 2rem; }

/* Specific desktop styles */

@media only screen and (min-width: 992px) {
    html { font-size: 1.25rem; }
}

デスクトップでは、すべてのフォントが 1.25 倍に拡大されます。ここまでは順調ですね。

しかし、IE8 に rem の代替手段を提供する必要があるため、次のような何らかのフォールバックを使用する必要があります。

/* Mobile Styles */

html { font-size: 16px; font-size: 1rem; }
h1 { font-size: 32px; font-size: 2rem; }

/* Specific desktop styles */

@media only screen and (min-width: 992px) {
    html { font-size: 20px; font-size: 1.25rem; }
    h1 { font-size: 40px; font-size: 2rem; }
}

欠点: そうすることで、デスクトップのメディアクエリですべての font-size 宣言を再定義する必要があります。別の方法として、em をフォールバックとして使用することもできますが、フォント サイズが大きくなります。

これに関するあなたの提案を聞いてわくわくします。

4

4 に答える 4

2

フォールバックをいじる代わりに、このポリフィルhttps://github.com/chuckcarpenter/REM-unit-polyfillを使用するのが最善のようです。

于 2013-11-04T23:46:05.630 に答える
1

pollyfill を使用して、js の処理が最も遅いブラウザーにさらに多くの js をフィードするのはなぜですか?

sass のようなプリプロセッサを使用する必要があります。.lt-ie9 ox フォールバックを追加するだけで使用できますが、下にタイポグラフィ セクションを作成し、条件付きコメントを使用してそれを html タグに設定するのが好きです。ie の別のスタイルシートとして、最も遅いブラウザでより多くの http 要求を投げることが再びあります。

于 2015-02-25T16:41:12.927 に答える