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

6

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

или просто

@media (max-width: 568px)

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

html
css

4 ответов

2

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

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

2

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

1

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

1

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

Sign up or Log in to write an answer