Как организовать атрибут "размеры" для reps.imgs в контексте, ориентированном на мобильные устройства

Question

Я настраиваю изображения для адаптивного веб-дизайна и использую недавно формализованный синтаксис адаптивных изображений. Я не использую все аспекты, только части srcset и размеры. Грубо говоря, моя разметка выглядит следующим образом:

<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), который также использует медиа-запросы минимальной ширины, где у меня (правильно) наименьшие точки останова на первом месте.

Должны ли я иметь меньшие точки останова в первую очередь в этой разметке, также? Или это не имеет никакого значения в контексте разметки изображения?

Answer 1

Порядок имеет значение. В CSS более поздние правила переопределяют предыдущие правила, если они имеют одинаковую специфику. Это может привести к результату, что более поздний CSS переопределяет предыдущие.

В контексте соответствующего изображения берется первое значение размера, соответствующее условию носителя. Это может привести к обратному эффекту упорядочения.

Это означает, что если вы используете минимальную ширину, ваш список размеров имеет смысл, только если он идет от более высоких значений минимальных условий к более низким значениям (ваш пример).

Если вы хотите перевернуть свой список (от низшего к более высокому), вам нужно вместо этого использовать условия максимальной ширины, чтобы выразить то же значение CSS.

В конце: делайте так, как хотите, но сохраняя условие минимальной ширины и просто переворачивая список, работать не будет.

---

В конце концов, в случае с размерами нет подхода "сначала мобильный" или "настольный компьютер", а всего лишь простой универсальный подход.