Какой должен быть порядок следования @media queris при формате «Сначала десктоп»?

Question

[weranda]

Приветствую.
Многие пишут, в том числе и основоположник "теории" - Сперва мобильные, о том, что логичным и очевидным является использование media queris в порядке от меньшего разрешения к большему. К примеру человек, написавший пост на этой странице утверждает о том, что:

Браузер высчитывает реальное значение min-width исходя из размеров окна браузера, а max-width — от разрешения экрана, соответственно при разрешении 1920px сработают max-width(480px), max-width(800px) и так далее, вплоть до max-width(1920px).

Я проверил, проверил несколько раз и, либо у него лыжи не едут, либо у меня. max-width срабатывает при разрешении меньшем, чем обозначено в нем, а не наоборот.

Хотелось бы разобрать следующее высказывание:

Браузер высчитывает реальное значение min-width исходя из размеров окна браузера, а max-width — от разрешения экрана

Вообще не понятно как это применительно в реальности. Если контрольная точка была сделана на отметке 480 пикселей, то правила указанные в ней - min-width или max-width, будут срабатывать при размере окна браузера, либо в большую, либо в меньшую стороны соответственно. Так? Если так, то какой смысл в этой фразе?

Теперь о порядке следования media queries. Как мне представляется, при использовании формата от дестопного варианта дизайна к мобильному, сначала в таблице стилей идут правила без указания правил media queries, а затем при уменьшении размеров дизайна (его отображения), должны вступать в действие media queries в порядке убывания - от большего к меньшему:

@media (max-width: 900px)
@media (max-width: 800px)
@media (max-width: 700px)
@media (max-width: 600px)
и так далее, вплоть до самого меньшего разрешения окна.

Кстати в чем заключается разница между следующими запросами и какой из них лучше использовать?

@media (max-width: 900px){}
@media screen and (max-width: 900px){}
@media only screen and (max-width: 900px){}

Answer 1

[Сергей delphinpro]

Вы правильно поняли. При написании Desktop first - стили пишутся от большего к меньшему.

@media (max-width: 900px){} - правило учитывает только ширину вьюпорта на любом отображающем устройстве.
@media screen and (max-width: 900px){} - правило распространяется только на экраны монитора с соответствующим вьюпортом
@media only screen and (max-width: 900px){} - аналогично предыдущему
Помимо экранов (screen) могут быть и другие устройства представления информации - print, projection, tvи т.д.

Comments

[weranda]

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

[Сергей delphinpro]

последнее не стоит использовать вообще в настоящее время. оно использовалось когда-то в качестве хака от браузеров не понимающих mediaquery.
первое - как уже писал, будет применяться на всех устройствах.
второе - только на дисплеях.
как еще описать?

[Сергей delphinpro]

ну кроме того, правила не ограничиваются одним лишь screen. Для мобильных устройств, например, доступно задание стилей для портретной и альбомной ориентации (portrait, landscape), для телевизоров - tv, для принтеров (плоттеров и т.п.) - print.
Просто почитайте спецификацию.

[weranda]

Понял. Спасибо.

Answer 2

[Евгений Петров]

Если кто-то путает окно браузера с областью просмотра, да ещё к min-width и min-width экран монитора приплетает — у него не только лыжи не едут, а в голове смазки маловато:)

1. Обрабатываются все media queries. От первого и до последнего.
2. Если выполняются условия в нескольких @media, то для конфликтующих правил вступает в силу обычный расчёт каскада (читай приоритет правил).

Относительно синтаксиса неплохо бы почитать спецификацию, да и вот хорошее описание.

Answer 3

[htmleater]

Простая логика: Насколько больше можно реализовать на =>1440px, нежели на 320?
Следовательно, наворачиваем всё, что задумали на десктопе, а потом с помощью медиа прописываем поведение на более малых величинах.
Поверьте, что кол-во кода стилей при таком подходе будет существенно отличаться от того, когда идут от противного.
В прпинципе, достаточно примерно такого:
media screen and (min-width: 320px) and (max-width: 479px) {}
media screen and (min-width: 480px) and (max-width: 639px) {}
media screen and (min-width: 640px) and (max-width: 767px) {}
media screen and (min-width: 768px) and (max-width: 779px) {}
media screen and (min-width: 800px) and (max-width: 1023px) {}
media screen and (min-width: 1200px) and (max-width: 1681px) {}

но я часто добавлю ещё несколько значений, для которых существуют общие значения.

И лучше на этапе разработки подключать отдельный файл стилей для медиа

Comments

[weranda]

>>> Поверьте, что кол-во кода стилей при таком подходе будет существенно отличаться от того, когда идут от противного.

Не верю, кажется ваше утверждение сомнительно.

[htmleater]

Ваше право. Имею опыт вёрстки одного и того же проекта, как снизу, так и сверху. Личный опыт показал, что вёрстка снизу увеличивает код, хаос и повторяющиеся правила стилей значительно.

[stalerum]

htmleater: никак не пойму, что вы хотите сказать!

Личный опыт показал, что вёрстка снизу увеличивает код, хаос и повторяющиеся правила стилей значительно.

Что вы подразумеваете под "снизу"? Самое наименьшее разрешение?
Тогда зачем вы указали выше такую последовательность?

media screen and (min-width: 320px) and (max-width: 479px) {}
media screen and (min-width: 480px) and (max-width: 639px) {}
media screen and (min-width: 640px) and (max-width: 767px) {}
media screen and (min-width: 768px) and (max-width: 779px) {}
media screen and (min-width: 800px) and (max-width: 1023px) {}
media screen and (min-width: 1200px) and (max-width: 1681px) {}

Получается, вы сами себе противоречите.