8

メディアクエリを使用してレスポンシブ Web サイトを構築しています。非常に小さな画面では、別のナビゲーション方法に切り替える必要があります。

デスクトップ/タブレット画面では、スプライト ベースの UL/LI リスト メソッドを使用しています。小さなスマートフォンの画面では、シンプルなリンク テキストを使用します。

私が使用する場合、表示: なし; スマートフォンのスプライト ベースのナビゲーションを非表示にするには、スプライト イメージは引き続き読み込まれますが、表示されませんか? スマートフォン用の CSS メディア クエリで画像参照を解析する必要がありますか? または、小さいものから大きいものまで設計しているため、最初の css から画像参照を完全に除外する必要があります (つまり、デフォルトの css は小さな画面用であり、画面が大きくなるにつれてメディアクエリが変更されます)。

4

3 に答える 3

12

あなたの質問に答えるために、ロード時間を短縮display: noneしません。問題のコンテンツ/クラス/コードは引き続き読み込まれますが、ブラウザーはそれらを表示/レンダリングしません。

モバイル ファーストのアプローチを使用しているように思われるため、次のいずれかを実行できます。

  1. 目的のモバイル/タブレット/デスクトップ クラスに関係なく、すべてのアセット/クラス/スクリプトを読み込み、メディア クエリを使用してレイアウトを調整します。

    • これは、特定のデバイス タイプで使用されていない場合でも、すべてのコンテンツ (スプライトなど) がデフォルトで読み込まれることを意味します。
    • コンテンツ/レイアウトは、メディア クエリ ルールに基づいて表示または非表示になります。

  2. メディアクエリの状態が変化した場合にのみ、必要なアセット/クラス/スクリプトをロードします。これの利点は、経験が問題のデバイスタイプにより相対的になることです:

    • より反応的でタイムリーなエクスペリエンスと機能のロード
    • 潜在的に少ない帯域幅
    • デバイスの種類ごとに、より厳密に設計されたエクスペリエンス
    • 一部のアセット (画像/背景など) を選択的に読み込むことができます

オプション 2 を検討する場合、メディア クエリの状態の変化に基づいて CSS および Javascript コードをロードできる、さまざまなオープンソースのアセット ローダーがあります。[注: この手法を使用するには、より多くの労力/設計が必要になります]。

enquire.jsを使用した簡単な例(他にもアセット ローダーがあります) では、次のことが可能になります。

<script type="text/javascript">

  // MQ Mobile
  enquire.register("screen and (max-width: 500px)", {
      match : function() {
          // Load a mobile JS file
          loadJS('mobile.js');
          // Load a mobile CSS file
          loadCSS('mobile.css');
      }
  }).listen();

  // MQ Desktop
  enquire.register("screen and (min-width: 501px)", {
      match : function() {
          // Load a desktop JS file
          loadJS('desktop.js');
          // Load a desktop CSS file
          loadCSS('desktop.css');

      }
  }).listen();

</script>

したがって、ブラウザーの幅が 501px 以上の場合、desktop.jsとの両方desktop.cssが読み込まれ、501px 未満では利用できず、必要のない機能/アセットが有効になります。

于 2013-04-19T14:08:56.817 に答える
1

すべてのアイテムがロードされますが、エンド ユーザーには表示されません。

于 2013-04-19T12:58:31.887 に答える