0

モバイル ユーザーの帯域幅を節約するために、さまざまなデバイス幅でさまざまなサイズの画像を表示したいのですが、画像がまったくない場合もあります。

次のように意図したとおりに機能しますか？

Modernizr.load([{
    test: 1025 > window.screen.width, 
  yep: "mobile.css", 
  nope: "desktop.css" 
}]);

また、次の純粋な css ソリューションも発見しました。これは機能するとされており、必要な場合にのみ画像をロードします。

<div id="test3">
    <div></div>
</div>
#test3 div {
    background-image:url('images/test3.png');
    width:200px;
    height:75px;
}
@media all and (max-width: 600px) {
    #test3 {
        display:none;
    }
}

また

<div id="test5"></div>
@media all and (min-width: 601px) {
    #test5 {
        background-image:url('images/test5-desktop.png');
        width:200px;
        height:75px;
    }
}
@media all and (max-width: 600px) {
    #test5 {
        background-image:url('images/test5-mobile.png');
        width:200px;
        height:75px;
    }
}

このソリューションのソース: http://timkadlec.com/2012/04/media-query-asset-downloading-results/

しかし、かなり複雑です。

複数の画像バージョンを読み込まないようにする代わりに、modernizr を使用して背景画像を設定するすべての css を読み込むのは良い考えですか?

4

1 に答える 1

1

大まかに言えば、はい、あなたが概説した方法で機能します。

モダニズム

Modernizr を使用して JavaScript と CSS を読み込むことができますが、Modernizr.mq()メソッドを使用してメディア クエリを具体的に照合することもできます。例：

Modernizr.load([{

    // Test if media query matches
    test : Modernizr.mq('only screen and (max-width: 600px)'),

    // load css and js purely for mobile
    yep: ['/assets/mobile.css', '/assets/mobile.js']

  }]);

2 つのメディア クエリ (デスクトップとモバイル) がある場合は、両方をテストして必要なアセットを読み込むか、テスト条件に一致しないため、上記を変更して以下を含めます。

    nope: ['/assets/desktop.css', '/assets/desktop.js']

すべての JS/CSSアセットの読み込みをフルフィルするために modernizr (またはその他のアセット ローダー) を使用することは、次の知識を持っているユーザーのみが行うことができる決定です。

  • アプリの複雑さ。
  • 必要なアセット (画像、スクリプト、関数など) の数。
  • 洗練度/インタラクティブ性のレベル
  • modernizr を使用すると節約できること
  • アプリ/サイトの使用目的

メディアクエリの何が問題になっていますか?

サイト/アプリのフットプリントがそれほど大きくない場合は、メディア クエリを単独で使用して、さまざまなデバイス タイプに合わせてレイアウト (さらに重要なことにエクスペリエンス) を調整しても問題はありません。実際、これはより単純なアプローチであり、複雑ではなく、レスポンシブ デザインの理論に沿っています。

これは、デバイス タイプごとに異なるイメージを交換する [所属なし] の一例です。ブラウザのサイズを変更して、画像がどのようにロードされるかを確認してください。

メディア クエリの使用に関しては、単純に次のいずれかを行うことができます。

メディア クエリを 1 つのスタイルシートに含めます。

@media only screen and (max-width: 600px) {
    #test5 {
      background-image:url('images/mobile.png');
      width:200px;
      height:75px;
  }
}
@media only screen and (min-width: 601px) {
    #test5 {
      background-image:url('images/desktop.png');
      width:200px;
      height:75px;
  }
}

または、個別の CSS ファイルへのリンク:

<link rel="stylesheet" type="text/css" media="screen and (max-width: 600px)" href="mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 601px)" href="desktop.css" />

または、次を使用し@importます。

@import url(mobile.css) (max-width:600px);
@import url(desktop.css) (min-width:601px);

ここ@importで実際の動作の簡単な例を見ることができます。

その他の方法

クエリ状態の変化に基づいてスクリプトをロード/アンロードする画面幅の変更をリッスンするために evenListeners を使用する他のより洗練された方法がありますが、大多数のプロジェクトでは、それらはやり過ぎです。

于 2013-04-23T21:17:47.790 に答える