Какой правильный синтаксис медиа запросов css?

6
2

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)

или просто

@media (max-width: 568px)

Или это совершенно разные типы запросов? Немного запутался...


Musa Gharib

3 years ago

Похожие вопросы

4 ответов





В первом примере задается минимальное разрешение экрана и максимальное разрешение экрана. Это как интервал от и до.

Во втором примере задается только максимальное разрешение экрана при котором сработает медиа-запрос, т.е. все что меньше 568px будет этот запрос отрабатывать. 

Алексей Виноградов

3 years ago

А именно "only screen" ни на что не влияет? Т.е. при адаптации проще писать все по второму "шаблону"?

Musa Gharib

3 years ago

only screen - это для старых браузеров, которые не поддерживают медиа запросы. Если не нужна поддержка браузера в какой-нибудь старой Nokia, слово only можно не писать. Я пишу обычно без only, просто media screen. @media без screen тоже допускается писать.

Алексей Виноградов

3 years ago

Спасибо большое, все понял!

Musa Gharib

3 years ago

Ваш ответ