Вопрос о Media Query?

Question

[Владислав]

Объясните как правильно работают эти медиа запросы ...

768-1024 и дальше ? к какому типу устройств это относиться ?

@media (max-width: 1024px) and (min-width: 768px) and only screen and (max-width: 1300px)
@media (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) and (min-width: 768px)
@media (max-width: 1024px) and (min-width: 768px) and (max-width: 374px)

Comments

[Ярослав Иванов]

@media (max-width: 1280px) {

}
@media (max-width: 1024px) {

}
@media (max-width: 768px) {

}
@media (max-width: 320px) {

}

И ничего лишнего.

[Владислав]

Ярослав Иванов, Пример конкретно из кода.

@media only screen and (max-width: 1300px) {
  font-size: 1.7rem;
}
@media only screen and (max-width: 1200px) {
  font-size: 1.6rem;
}
@media (max-width: 1024px) and (min-width: 768px) {
  font-size: 1.8rem
}
@media (max-width: 374px) {
  font-size: 1.6rem;
}
@media (max-width: 1024px) and (min-width: 768px) {
  font-size: 1.4rem
}
@media (max-width: 1024px) and (min-width: 768px) and only screen and (max-width: 1300px) {
  font-size: 1.3rem;
}
@media (max-width: 1024px) and (min-width: 768px) and only screen and (max-width: 1200px) {
  font-size: 1.2rem
}
@media (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px) and (min-width: 768px) {
  font-size: 1.4rem;
}
@media (max-width: 1024px) and (min-width: 768px) and (max-width: 374px) {
  font-size: 1.2rem
}

Зачем использовать медиа запросы которые я указывал выше, когда конкретно есть only screen and (max-width: 1300px) и скорей всего ты ошибаешься, так как каждый отдельный медиа запрос был бы разделен запятой а не 'and'.

[Пащук Илья]

Владислав, все просто вы должны понимать что в таком контексте @media (max-width: 1024px) and (min-width: 768px) мы попросту перебираем отрезок величины по которому будет работать правило, к примеру использование параметра "only screen" не обязательно указывать, в большинстве случаев это бутафория которая по сути не нужна, достаточно указать"@media (max-$parm: $parm)", с Ярослав Иванов я полностью согласен данной конструкции в современном вебе более чем достаточно, все более конкретные заморочки с условиями нужны использовать только для определенных задач, интересует более подробней читайздесь. Мой друг если ты в своих сборках используешь процессоры или препроцессоры по типу scss или less или postcss, тогда рекомендую к просмотру я сам часто использую от проекта к проекту: Здесь Здесь

@Vladyslawx Удачи!

Answer 1

[Александр]

Оператор only применяется, когда нужно скрыть правило media от старых браузеров, которые не поддерживают описываемый синтаксис. Браузеры, которые поддерживают медиа запросы, оператор only просто проигнорируют.