0

私のサイトのすべてのページで960gsのアダプティブCSSを使用しています。私はすべてのページに以下のスクリプトを持っています：

<script>
var ADAPT_CONFIG = {
  path: '/css/960gs/',
  dynamic: true,
  range: [
    '0px    to 760px  = mobile.min.css',
    '760px  to 980px  = 720.min.css',
    '980px  to 1280px = 960.min.css',
    '1280px to 1600px = 1200.min.css',
  ]
};
</script>
<script src="/js/adapt.min.js" type="text/javascript"></script>

私の問題は、ユーザーが別のページに移動すると、Mozilla Firefoxを使用しているときに、適切なスタイルシートの選択がユーザーに表示されることです。つまり、最初はすべての画面がレイアウトになり、1秒もかからずにレイアウトが適切なものに変更されます。このことをどう説明したらいいのかわからない。しかし、私が望んでいるのは、適切なスタイルシートをロードする際のパフォーマンスを改善することです。

ありがとう

4

1 に答える 1

1

960.gsサイトでは、

「Adapt.jsの潜在的な欠点は、新しいスタイルシートがフェッチされているときに、スタイルが設定されていないコンテンツが短時間フラッシュされる可能性があることです（CSSの「Ajax」と考えてください）。CSSファイルを小さく保つことでこれを軽減するために最善を尽くしました。 （3 KB）これは、複数のソリューションを使用した問題に対する提案された、規定されていないアプローチであることに注意してください。」

したがって、これは既知の問題です。私はjavascriptでこれを行うのが好きではないと言わざるを得ません。CSSは、さまざまな解像度を完全に処理できます。基本的なCSSがあり、次のようにさまざまな解像度を処理するための個別のプロパティを追加する場合：

@media only screen and (min-width: 980px) and (max-width: 1280px) { <<<CSS Here>>> }
@media only screen and (min-width: 760px) and (max-width: 980px) { <<<CSS Here>>> }
@media only screen and (max-width: 767px) { <<CSS for mobile portrait>> }
@media only screen and (min-width: 480px) and (max-width: 767px) { <<CSS for Mobile landscape>> }
于 2012-06-15T07:56:23.837 に答える