Какой правильный синтаксис медиа запросов css?
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
или просто
@media (max-width: 568px)
Или это совершенно разные типы запросов? Немного запутался...
4 ответов
В первом примере задается минимальное разрешение экрана и максимальное разрешение экрана. Это как интервал от и до.
Во втором примере задается только максимальное разрешение экрана при котором сработает медиа-запрос, т.е. все что меньше 568px будет этот запрос отрабатывать.
only screen - это для старых браузеров, которые не поддерживают медиа запросы. Если не нужна поддержка браузера в какой-нибудь старой Nokia, слово only можно не писать. Я пишу обычно без only, просто media screen. @media без screen тоже допускается писать.
А именно "only screen" ни на что не влияет? Т.е. при адаптации проще писать все по второму "шаблону"?
Спасибо большое, все понял!