Как правильно записывать @media screen?

Question

[Dextersis]

Здравствуйте, подскажите пожалуйста как правильно записывать media screen?

1 Вариант

@media screen and (min-device-width: 375px)  and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}

2 Вариант

@media screen and (min-device-width: 375px),  and (max-device-width: 667px), and (-webkit-min-device-pixel-ratio: 2), and (orientation: portrait) {}

3 Вариант

@media screen and (min-device-width: 375px)  and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}

4 Вариант

@media screen and (min-device-width: 375px), screen and (max-device-width: 667px), screen and  (-webkit-min-device-pixel-ratio: 2), screen and  (orientation: portrait) {}

И 2 вопрос, правильно записывать media screen от меньшего разрешения к большему или наоборот?

1 Вариант

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {}

@media only screen and (min-device-width: 460px) and (max-device-width: 760px) {}

2 Вариант

@media only screen and (min-device-width: 460px) and (max-device-width: 760px) {}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {}

Большое спасибо.

Answer 1

[Сергей delphinpro]

Попробуйте ознакомиться с назначением параметров медиа-запросов.
screen - означает устройство отображение типа "монитор". Ставить его или нет - зависит от того, как вы собираетесь применять стили. Кроме screen может быть print (для принтеров), tv (для телевизоров, низкое разрешение), projection и другие. Media types.
device-pixel-ratio - плотность пикселей, плотность 2 и выше присуща ретина-дисплеям.
orientation - положение переносного устройства в пространстве.

Так что нельзя прямо ответить на ваш вопрос. Все запросы правильные. Вопрос в том, когда и какие условия применять.

На второй вопрос тоже нет "правильного" ответа. Если вы используете в верстке подход, называемый "mobile first" то будет удобнее писать от меньшего к большему. Если вы сначала верстаете "большую" версию, а потом адаптируете ее к меньшим разрешениям, то, соответственно, будет удобнее писать от большего к меньшему. Оба подхода к верстке имеют право на жизнь, и нельзя назвать один из них более правильным.

Добавлю по второму вопросу. Если вы используете диапазоны от и до (как в ваших примерах), то абсолютно нет разницы в каком порядке располагать код, т.к. эти диапазоны обычно не пересекаются.
Порядок имеет значение в таких случаях (без задания диапазона, когда предыдущий стиль перекрывается последующим):

.block { width: 100px; }
@media (min-width: 460px) { .block { width: 400px; } }
@media (min-width: 768px) { .block { width: 700px; } }

PS. only screen - это хак для древних браузеров, не понимающих медиа-запросов. Неактуально уже лет 5. Просто screen пишите.

Comments

[Dextersis]

Большое спасибо, и еще вопрос можно. Не пойму в чем причина к примеру у меня прописано так :

media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
container:230px
}
media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
container:230px
}

media screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
container:350px
}

media screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
container:350px
}

В хроме черед адаптивный просмотр все как и надо при разрешении 480px, container принимает значение 230px. Но в опере и мозиле при разрешении 480px, container принимает значение почему-то в container:350px

А если устанавливаю доп плагины для хрома чтоб посмотреть адаптивку, то media screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){} вообще не видит, но если прописать вот так media screen and (min-device-width: 375px) {},то видит. В чем может быть причина?

[Максим]

Dextersis: потому что тут уже зависит не от браузера, а от ориентации экрана. Нужно тестировать в специальном инструменте DevTools (F12) и затем Ctrl +Shift + M.

[Dextersis]

Максим: Я же говорю что через него в хроме все отлично,тоесть к примеру: media screen and (min-device-width: 320px) and (max-device-width: 480px), значение container:230px , как и должно быть, а вот в мозиле или через Opera Mobile Emulator, то container принимает значение в 350px, но это значение прописано для другого разрешения media screen and (min-device-width: 375px) and (max-device-width: 667px)

[Сергей delphinpro]

Dextersis: Эмуляторы - такие эмуляторы. Не все умеют одинаково хорошо эмулировать. Смотрите на своем телефоне или планшете.