0

レスポンシブ Web デザイン用の画像を設定しており、最近正式化されたレスポンシブ画像構文を採用しています。私はすべての側面を使用しているわけではなく、srcset と sizes の部分だけを使用しています。大まかに言えば、私のマークアップは次のとおりです。

<img src="/image.jpg" alt="my alt text"
    srcset="
        /image-sm.jpg 320w,
        /image-md.jpg 480w,
        /image-lg.jpg 600w,
        /image-xl.jpg 742w"
    sizes="
        (min-width: 992px) 742px,
        (min-width: 768px) 582px,
        (min-width: 600px) 441px,
        (min-width: 480px) 599px,
        (min-width: 321px) 479px,
        320px"
>

私のデザインはモバイルファーストの方法で構築されています。だから私の質問はこれです：

メディア クエリの順序によって、ブラウザが選択する画像に違いはありますか?

ご覧のとおり、最大のブレークポイントから最小のブレークポイントに移動しています。これは、デフォルトのサイズが小さく、私が見たすべての構文例がデフォルトのサイズを最後に置いているためです。しかし、これは、最小幅のメディア クエリも使用する私のメインの CSS (SASS 経由でコンパイル) とは対照的です。

このマークアップでも、最初に小さなブレークポイントを設定する必要がありますか? それとも、画像マークアップ コンテキスト内で違いはありませんか?

4

1 に答える 1

0

順序は重要です。CSS では、後の規則が同じ特異性を持っている場合、前の規則をオーバーライドします。これにより、後の CSS が前の CSS をオーバーライドするという結果になる可能性があります。

resp image のコンテキストでは、メディアの状態に一致する最初のサイズ値が取得されます。これにより、逆の順序効果が生じる可能性があります。

これは、min-width を使用する場合、サイズ リストが意味をなすのは、それがより高い最小条件値からより低い値に移行する場合に限られることを意味します (あなたの例)。

リストを (低い方から高い方へ) 逆にしたい場合は、代わりに max-width 条件を使用して、同じ CSS 値を表現する必要があります。

最後に: 好きなように実行しますが、最小幅の条件を維持してリストを逆にするだけでは機能しません。

最後に、サイズに関しては、モバイル ファーストまたはデスクトップ ファーストのアプローチはなく、単純なユニバーサル アプローチのみがあります。

于 2015-03-19T00:37:41.767 に答える