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

Question

Дмитрий @xDMITRIYx

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

Подскажите несколько вопросов по медиа-запросам, пожалуйста:
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. Можно писать медиа-запросы многократно после каждого блока? Или все блоки должны быть перечислены в одном медиа-запросе?

Вопрос задан более трёх лет назад
2301 просмотр

Комментировать

Подписаться 2 Оценить Комментировать

Answer 1 · 2016-11-22 22:35:30

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 этих случая.

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

Войдите на сайт