Как задать media queries?

Question

[drtvader]

Привет!
Подскажите пожалуйста, как мне правильно задать media в данном случае.
Есть мобилка 320, есть таблетка от 600 пикселей. Есть iphone 6s с размером экрана в 736 пикселей в горизонталке.
media (max-width: 600px) (как тут задать правильно размер, что бы учитывалось горизонтально положение мобилок)
media (max-width: 1023px)

Answer 1

[Анатолий]

Для определения ориентации устройства есть orientation: landscape и orientation: portrait.
Например,

@media screen and (max-device-width: 480px) and (orientation: landscape) {
/* свойства для мобилок < 480px в ландшафтной ориентации */
}

Не забудьте указать viewport в HTML

Answer 2

[Alexandr Alexandrov]

Например,

• https://css-tricks.com/snippets/css/media-queries-...
  
• stephen.io/mediaqueries
  
• https://responsivedesign.is/develop/browser-featur...
  

Comments

[drtvader]

искал универсальный вариант, но вроде нашел
media (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 736px) and (min-device-width: 320px)
правда не уверен, что все мобильные девайсы подойдут.

[Alexandr Alexandrov]

drtvader, универсальнее:

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

Свойство -webkit-min-device-pixel-ratio: 2 для ретины. Если задача стоит преобразовать что-либо на яблочной (и не только) продукции, то дополнительный медиа-запрос с данным свойством это позволит.

[kulaeff]

Alexandr Alexandrov, а чо сразу яблочная продукция? Ретина не только на яблоке, просто на яблоке это называется ретиной.

[Alexandr Alexandrov]

kulaeff, таки да, спасибо за уточнение. нагулил и прокачался по этому вопросу.

[drtvader]

Alexandr Alexandrov, получается не универсальные, у 6s+ ширина 736 пикселей.