CSS Медиа запросы, зачем only?

Question

[Дмитрий]

Подскажите несколько вопросов по медиа-запросам, пожалуйста:
1. Согласно данным справочника "Оператор only позволяет подключать стили для браузеров, которые не поддерживают медиа запросы", например @media only screen and (color) {/* css-стили */;}
Как это работает? Я так понимаю, что если броузер не поддерживает медиа-запрос то и тег @media он понимать не должен, но запрос @media only если верить справочнику понимает, почему другие, "обычные" не понимает? Где логика? Как так?
2. @media all - зачем нужен тег all? Почему не писать просто @media? Не будет работать?
3. @media screen - что попадает под "скрин"? Все устройства сейчас имеют цветной монитор, от телефонов до компов, (кроме разве что e-book'ов). Зачем этот тег и чем он, рассуждая такой логикой, отличается от all?
4. Формы запросов по нескольким контрольным точкам:

@media screen and (max-width: 650px) {}
@media screen and (max-width: 1020px) {}
@media screen and (max-width: 320px) {}

как CSS разбирает из этих запросов что применять? Устройство в 320 рх подходит под все три запроса? Или я привел некорректный пример, а правильно ставить в диапазонах "мин-макс" через and? (но я его взял из одной из статей по адаптивной верстке). Или нужно ставить медиа стили строго в порядке убывания разрешения, чтобы самый нижний в коде был с наименьшим разрешением?
5. Стиль "по умолчанию", исходный так сказать, его тоже необходимо по логике при отзывчивой верстке привязывать к какому-то диапазону? Т.е. при использовании медиа-запросов все стили становятся под медиа-запросы? или как он тогда будет применяться, если медиа-апрос не ставить?
6. Можно ли сделать несколько .css-файлов под разные медиа-запросы? и как из правильно их подключать? или все должно быть в однм .css?
7. Можно писать медиа-запросы многократно после каждого блока? Или все блоки должны быть перечислены в одном медиа-запросе?

Answer 1

[Алекс Глебов]

1-3)@media (max-width: 500px) {} - все
4)

Устройство в 320 рх подходит под все три запроса?

да

как CSS разбирает из этих запросов что применять?

применится правило, которое ниже в коде. Как если бы не было никакого медиа, а был обычный css.
4)

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

Если верстаешь сначала для монитора, потом для мобилок адаптируешь, то с наименьшим будет снизу, т.к ему надо перекрывать правила больших расрешений.
Если mobile first, то стили для телефона без медиа, а под большие разрешения ниже пишешь медиа запросы.
5) если стиль не меняется никогда (цвет например), медиазапрос для него не нужен.
6) Не удобно искать стили в разных местах.
хорошо, если один класс встречается 1 раз в css. Так лучше для поддержки кода
sass позволяет писать медиа внутри правила

.elem {
    color: red;
    @media () {
        color: red;
     }
}

7) это вопрос удобства. Главное не смешивай 2 этих случая.

Answer 2

[Ankhena]

Я добавлю к ответу Алекс Глебов

2, 3. Например, еще есть принтеры и программы для чтения с экрана.

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

7. Я обычно делаю так: если изменений для адаптации мало, то пишу основной селектор и сразу под ним необходимые media. Если много, то наоборот, медиа запрос и в нем все селекторы, которые в нем нуждаются.

Ну и главное: просто потестируйте на простом примере с изменением цвета фона в зависимости от размера экрана. Пишите media в одном и другом порядке, смотрите в DevTools. Пробуйте зависимости от ширины экрана, вьюпорта, плотности пикселей, соотношения сторон и т.д. И все быстренько поймете.

А еще, заодно, сразу 2 ссылочки про вьюпорты мобильных устройств
https://www.esolutions.se/en-GB/test
viewportsizes.com
(Обычно это следующий вопрос, почему на мобильном, у которого экран 1920 точек показывается версия от 320)

Comments

[dhat]

А почему на мобильном, у которого экран 1920 точек показывается версия от 320?))

[Ankhena]

dhat: потому что вьюпорт у него 320. Погуглите размеры viewport. Я с телефона, ссылки под рукой нет

[dhat]

Ankhena W: т.е. вьюпорт и количество пикселей не одно и то же?

[Ankhena]

dhat: нет

https://www.esolutions.se/en-GB/test
viewportsizes.com
screensiz.es/phone

[dhat]

Ankhena W: ок. А какое практическое применение этим знаниям?))

[Ankhena]

dhat: нормальная адаптивная верстка.
Чтобы Вы не считали, что для fullHD смартфона надо ставить media 1920