0

お祝いの挨拶スタッカー。IE7 と IE8 用のRespond.jsポリフィルと html5.js shivを使用して、CSS メディア クエリでレスポンシブサイトを作成しました。これらのブラウザーで最初にページを読み込むと、適切なフォント スタイルが適用される前に、大きなサイズのテキストが一瞬表示されることがあります。タイムズ ローマンの場合もあります。私はウェブフォントを使用していません。emsでフォントのサイズを調整しています。本文のフォントを 10px と 62.5% に設定してみましたが、違いはないようです。これは Respond ポリフィルの特性ですか?

乾杯

4

2 に答える 2

1

あなたはFOUCを実験しています!スタイルのないコンテンツのフラッシュ。リンクには、これを回避する方法が含まれています。スタイルを非同期的にロードしている場合、スタイルがまだコンテンツに適用されていないページライフのこの瞬間を試す理由を説明できるかもしれません。ポリフィルの使用が原因である可能性があります。最小化するために、ページと同時に使い捨てスタイルをロードすることをお勧めします。

于 2011-12-27T09:27:53.227 に答える
1

投稿のリンクが壊れているため、コードが表示されません。

この動作の考えられる理由の 1 つは、外部 css ファイルを含める方法です。使用した場合は、代わりに要素を使用@importしてみて<link>ください。すべての css ファイルを<head>要素に含めてください (本文ではありません)。

もう 1 つの理由は、過剰な重みまたはそれらの css ファイルの量が原因である可能性があります。ブラウザーがすべてのルールをロードして解析するのに時間がかかる場合があるため、サーバーが圧縮されたコンテンツを提供できるようになっている場合は、すべての css ファイルを提供してみてください。 gzip 圧縮 (または最も古い apache では deflate) を使用し、可能であれば、css リクエストの量も減らしてみてください (有効な例を取得するには、html5 ボイラープレートの .htaccess を参照してください)。

すべての css ファイルを 1 つのファイルに結合すると、通常、一度に 1 つのファイルを圧縮するよりも gzip 圧縮の方がうまく機能します。

最後に、それほど重要ではありませんが、css ルールのパフォーマンスを向上させます。常に詳細な特定のルールを使用し* { margin: 0; padding: 0 }、ブラウザーが一般的にこのスタイルを要素に適用するのに時間がかかるため、一般的なステートメントを常に避けます。

于 2011-12-27T10:20:41.183 に答える