メディアクエリを使用して応答性の高いWebサイトを構築しています。非常に小さな画面では別のナビゲーション方法に切り替える必要があります。display noneロード時間を短縮するか、アイテムがまだロードされているが表示されていないか
デスクトップ/タブレットの画面では、スプライトベースのUL/LIリストメソッドを使用しています。小さなスマートフォン画面では、簡単なリンクテキストが表示されます。
私が使用する場合、表示：なし;スマートフォン用のスプライトベースのナビゲーションを非表示にするには、スプライトイメージはまだ読み込まれますが、表示されませんか？スマートフォン用のCSSのメディアクエリで画像参照を解析する必要がありますか？または、小さいものから大きいもの（デフォルトのCSSは小さな画面用、メディアクエリは画面が大きくなるにつれてものを変更する）を設計しているので、最初のCSSからイメージ参照を完全に残しておく必要があります。
display: noneはロード時間を低下させない、あなたの質問に答えるために。問題のコンテンツ/クラス/コードはまだ読み込まれますが、ブラウザは表示/表示しません。
それはあなたがいずれかのことができるようにあなたは、モバイル最初のアプローチを使用しているように聞こえる：関係なく、モバイル/タブレット/デスクトップクラスのあなたが目指している
ロードすべての資産/クラス/スクリプトとメディアクエリを使用してレイアウトを調整します。
として必要な資産/クラス/スクリプトをロードしメディアクエリの状態が変化した場合にのみ。この利点は、経験がより相対的になることである問題のデバイス型：
オプション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>
、ブラウザがdesktop.jsとdesktop.css両方、その後、幅が501px以上である場合ロードすると、501px未満で利用可能ではなく、必須ではない機能/資産が有効になります。
すべてのアイテムがロードされますが、エンドユーザーには表示されません。
ありがとうございます！素晴らしい情報。 – bbuller