Медиа-запросы: как настроить таргетинг на настольные ПК, планшеты и мобильные устройства?

472

Я проводил некоторые исследования медиазапросов и до сих пор не понимаю, как настроить таргетинг на устройства определенных размеров.

Я хочу иметь возможность ориентироваться на настольные ПК, планшеты и мобильные устройства. Я знаю, что будут некоторые несоответствия, но было бы неплохо иметь общую систему, которая может использоваться для нацеливания на эти устройства.

Некоторые примеры, которые я нашел:

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px) 

Или:

# Phone
only screen and (max-width:320px)

# Tablet
only screen and (min-width:321px) and (max-width:768px)

# Desktop
only screen and (min-width:769px)

Какими должны быть точки останова для каждого устройства?

Betamax
источник
Медиа-запросы для стандартных устройств css-tricks.com/snippets/css/media-queries-for-standard-devices
Дмитрий Дзюбак,

Ответы:

644

ИМО это лучшие точки останова:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Изменить : Улучшен для работы с 960 сетками:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

На практике многие дизайнеры конвертируют пиксели в ems, в большинстве случаев лучше использовать масштабирование. При стандартном зуме 1em === 16px. Умножьте пиксели на, 1em/16pxчтобы получить ЭМС. Например, 320px === 20em.

В ответ на комментарий, min-widthэто стандартная конструкция «сначала для мобильных устройств», в которой вы начинаете с разработки дизайна для своих самых маленьких экранов, а затем добавляете постоянно растущие медиазапросы, прокладывая себе путь к большим и большим экранам. Независимо от того, предпочитаете ли вы min-, max-или их комбинации, быть осведомленным о порядке ваших правил, имея в виду , что если несколько правил соответствует один и тот же элемент, более поздние правила будут переопределять более ранние правила.

ryanve
источник
1
Мне было интересно увеличить нижний предел медиа-запросов. Кажется логичным, но не видел, чтобы это упоминалось слишком часто. Я бы даже сделал еще один шаг вперед и перешел на ems. Посмотрите на скриншоты @jonikorpi поведения Этана Маркотта с медиа-запросами масштабирования и px. github.com/scottjehl/Respond/issues/18
Ларри
21
Почему вы используете минимальную ширину, а не максимальную ширину? Как бы вы предотвратили, что min-width: 320pxCSS отменяет min-width: 801px?
user2019515
2
Этот код не работает на моих мобильных устройствах! Может кто-нибудь привести рабочий пример!
Джейкоб
3
У кого-нибудь есть «максимальная ширина», эквивалентная этому?
Pylinux
6
2018 - 2к и 4к на подъеме
Александр
160

Не предназначайтесь для определенных устройств или размеров!

Общая мудрость это не ориентированы на конкретные устройства или размеры , но рефреймировать термин «точка останова»:

  • сначала разработать сайт для мобильных устройств, используя проценты или ems, а не пиксели,
  • затем попробуйте в большом окне просмотра и обратите внимание, где он начинает терпеть неудачу,
  • перепроектировать макет и добавить медиа-запрос CSS только для обработки сломанных частей,
  • повторяйте процесс, пока не достигнете следующей точки останова.

Вы можете использовать responseivepx.com, чтобы найти «естественные» точки останова, как в «точках останова» Марка Драммонда .

Используйте естественные точки останова

Затем «точки останова» становятся фактической точкой, в которой ваш мобильный дизайн начинает «ломаться», то есть перестает быть полезным или визуально приятным. Если у вас есть хорошо работающий мобильный сайт, без медиазапросов, вы можете перестать беспокоиться о конкретных размерах и просто добавлять медиазапросы, которые обрабатывают последовательно большие области просмотра.

Если вы не пытаетесь привязать дизайн к точному размеру экрана, этот подход работает, устраняя необходимость ориентироваться на конкретные устройства . Целостность самой конструкции на каждой точку гарантирует , что она будет держать в любом размере. Другими словами, если раздел меню / содержимого / что-либо еще перестает использоваться при определенном размере, создайте точку останова для этого размера , а не для определенного размера устройства.

Посмотрите пост Лайзы Гарднер о поведенческих точках останова , а также пост Зельдмана об Итане Маркотте и о том, как адаптивный веб-дизайн развился из первоначальной идеи.

Используйте семантическую разметку

Кроме того, более простая и семантическая структура DOM с nav, header, main, section, и footerт.д. (избегая мерзости , как div class="header"с вложенными внутренними divтегами) , тем легче будет инженер отзывчивости, особенно избегая поплавки с помощью CSS Grid Layout (Sarah Drasner в генераторе сетки является отличный инструмент для этого) и flexbox для организации и повторного заказа в соответствии с вашим планом проектирования RWD.

Дейв Эверитт
источник
10
Клиент захочет, чтобы его сайт выглядел так на iPad. Моя лучшая точка останова - заставить сайт переключиться на мобильную верстку на iPad. Клиент не согласится с этим, он хочет, чтобы на iPad и других планшетах появилась модная версия. Общая мудрость не платит мою зарплату :) Мне нужно было делать трюки с метатегом viewport. Это было очень больно, но я справился с небольшой помощью JavaScript (как всегда). PS: я использовал см единиц, а не пикселей.
Рольф
С естественными точками останова вы можете иметь точку останова среднего размера, которая включает iPad (и другие планшеты) в альбомном режиме, или добавить другую точку останова для портретного режима. Иногда я использовал четыре точки останова, всегда запуская CSS и всю разметку с помощью mobile-first (сложнее уменьшить масштаб и сфокусировать внимание на мобильном, что означает, что ваш дизайн и контент сужены до базовых элементов, которые вы можете расширять по мере увеличения размеров) один чуть больше 400 пикселей в ширину (или «выше мобильного размера»), затем два размера рабочего стола, один очень широкий. Затем вы можете настроить точку останова «над мобильным», чтобы она хорошо работала на iPad.
Дейв Эверитт
2
Этого недостаточно для всех случаев. Взять, к примеру, флажки. Они могут подойти для всех веб-браузеров на ПК, но на планшете могут быть маленькими, чтобы пользователь мог их коснуться. Иногда вам нужно ориентироваться на устройства, будь то общая мудрость или нет. Это хорошая статья: html5rocks.com/ru/mobile/cross-device
monalisa717
2
Я с Дейвом на этом - есть так много устройств, которые вы не можете разработать для всех из них. Использование естественных точек останова обеспечивает работу вашего сайта независимо от доступного размера экрана. Что касается клиентов, желающих, чтобы их сайт выглядел определенным образом - вам нужно обучать их. Относительно того, что флажки слишком малы - где ваши ярлыки?
diggersworld
@ user1411056 - хорошая статья. Я думаю, это зависит от того, к чему вы стремитесь и как работает ваш сайт / веб-приложение. Я бы сказал, что базовый адаптивный дизайн должен лежать в основе всего, прежде чем вносить уточнения. diggersworld Я все для обучения клиентов - почему еще они платят вам? И да, флажки могут быть отзывчивыми; нажатие на ярлык эквивалентно, и ярлыки можно стилизовать. Тогда есть бесполезность зависания на сенсорных устройствах; который может иметь большие экраны, и задержка на 300 мс . Базовая основа RD, усиленная JS.
Дейв Эверитт,
154

Если вы хотите настроить таргетинг на устройство, просто напишите min-device-width. Например:

Для iPhone

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

Для планшетов

@media only screen and (min-device-width: 768px){}

Вот несколько хороших статей:

Сандип
источник
32
Мой планшет имеет ширину 2560x1600
LeeGee
36
Это может быть так, но браузеры на мобильных устройствах имеют «соотношение пикселей устройства». Здесь он обрабатывает каждый логический «пиксель» как 2, 3 или даже больше реальных пикселей на вашем устройстве. В противном случае высота в 20 пикселей будет очень маленькой и ее невозможно будет нажать - особенно на вашем экране!
greg84
6
@media only screen и (min-device-width: 480px) {} Я попробовал - подходит и для настольных компьютеров. Но что, если мы хотим только мобильное устройство?
Darius.V
@ Darius.V, это соответствует менталитету «Mobile First», что означает, что вы начинаете мобильную работу, а затем вносите изменения по мере увеличения экрана, поэтому вам нужно будет также добавить: @media only screen and (min-device-width: 1024){}или что-то подобное, чтобы отменить эти изменения. В качестве альтернативы, вы могли бы сделать это, @media only screen and (MAX-device-width: 1024){}если вы начали с дизайна рабочего стола и хотите вносить изменения только в вещи меньше 1024.
Steely
Это означает, что рабочий стол не будет работать с RWD из-за минимальной ширины устройства. Рекомендую делать минимальную ширину и ничего на основе устройства. Реальный отзывчивый не должен требовать обновления или устройства ограничены
TheBlackBenzKid
50
  1. Я использовал этот сайт, чтобы найти разрешение и разработал CSS для фактических чисел. Мои цифры немного отличаются от приведенных выше ответов, за исключением того, что мой CSS на самом деле попадает на нужные устройства.

  2. Кроме того, имейте этот отладочный фрагмент кода сразу после вашего медиа-запроса, например:

    @media only screen and (min-width: 769px) and (max-width: 1281px) { 
      /* for 10 inches tablet screens */
      body::before {
        content: "tablet to some desktop media query (769 > 1281) fired";
        font-weight: bold;
        display: block;
        text-align: center;
        background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
      }
    } 

    Добавьте этот элемент отладки в каждый медиазапрос, и вы увидите, какой запрос был применен.

user2060451
источник
27

Лучшие точки останова, рекомендованные Twitter Bootstrap

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }
Сантош Халсе
источник
25

Медиа-запросы для общих точек останова устройства

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

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

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
Пурвик Дхораджия
источник
19
  1. Очень маленькие устройства (телефоны, до 480px)
  2. Маленькие устройства (планшеты, 768 пикселей и выше)
  3. Устройства среднего размера (большие планшеты, ноутбуки и настольные компьютеры с разрешением 992 пикс. И выше)
  4. Большие устройства (большие рабочие столы, 1200px и выше)
  5. книжные электронные книги (Nook / Kindle), меньшие планшеты - минимальная ширина: 481 пикселей
  6. портретные планшеты, портретный iPad, альбомная электронная книга - min-width: 641px
  7. планшет, ландшафтный iPad, ноутбуки с низким разрешением - минимальная ширина: 961 пикселей
  8. HTC One device-width: 360px device-height: 640px -webkit-device-pixel-ratio: 3
  9. Samsung Galaxy S2 ширина устройства: 320px высота устройства: 534px -webkit-device-pixel-ratio: 1.5 (min - moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (минимальное соотношение устройств к пикселям: 1,5
  10. Samsung Galaxy S3 ширина устройства: 320px высота устройства: 640px -webkit-device-pixel-ratio: 2 (min - moz-device-pixel-ratio: 2), - Старые браузеры Firefox (до Firefox 16) -
  11. Samsung Galaxy S4 ширина устройства: 320 пикселей высота устройства: 640 пикселей -webkit-device-pixel-ratio: 3
  12. LG Nexus 4 device-width: 384px device-height: 592px -webkit-device-pixel-ratio: 2
  13. Asus Nexus 7 device-width: 601px device-height: 906px -webkit-min-device-pixel-ratio: 1.331) и (-webkit-max-device-pixel-ratio: 1.332)
  14. iPad 1 и 2, iPad Mini: ширина устройства: 768px, высота устройства: 1024px -webkit-device-pixel-ratio: 1
  15. iPad 3 и 4: ширина устройства: 768 пикселей, высота устройства: 1024 пикселей, -webkit-device-pixel-ratio: 2)
  16. iPhone 3G ширина устройства: 320 пикселей высота устройства: 480 пикселей -webkit-device-pixel-ratio: 1)
  17. iPhone 4 ширина устройства: 320 пикселей высота устройства: 480 пикселей -webkit-device-pixel-ratio: 2)
  18. iPhone 5 device-width: 320px device-height: 568px -webkit-device-pixel-ratio: 2)
Веб-дизайнер и промоутер
источник
1
Sansung Galaxy S3 @media only screen и (device-width: 720px) и (device-height: 1280px) и (-webkit-min-device-pixel-ratio: 2) протестировали и работали.
user2060451
5

Это не вопрос количества пикселей, это фактический размер (в мм или дюймах) символов на экране, который зависит от плотности пикселей. Следовательно, «min-width:» и «max-width:» бесполезны. Полное объяснение этой проблемы здесь: что такое соотношение пикселей устройства?

Запросы «@media» учитывают количество пикселей и соотношение пикселей устройства, что приводит к «виртуальному разрешению», которое вы должны учитывать при разработке своей страницы: если ваш шрифт имеет фиксированную ширину 10 пикселей и «» виртуальное горизонтальное разрешение »составляет 300 пикселей, для заполнения строки потребуется 30 символов.

jumpjack
источник
7
Отлично. Так какими должны быть медиа-запросы?
PKHunter
4

В настоящее время наиболее распространенным явлением является просмотр устройств с сетчаткой, другими словами: устройств с высоким разрешением и очень высокой плотностью пикселей (но обычно меньше, чем физический размер менее 6 дюймов). Вот почему вам нужно будет отображать на своем CSS специализированные медиа-запросы. Это самый полный пример, который я смог найти:

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

Источник: Сайт CSS-Tricks

Иезекииль Адриан
источник
4

Поскольку существует много размеров Различной экраны , которые всегда меняются , и , скорее всего , всегда будет меняться лучшим путем, чтобы основывать свои точки разрыва и медиа - запросы на вашем дизайне.

Самый простой способ сделать это - получить готовый дизайн рабочего стола и открыть его в веб-браузере. Медленно уменьшайте экран, чтобы сделать его уже. Наблюдайте, чтобы увидеть, когда дизайн начинает «ломаться» или выглядит ужасно и тесно. На этом этапе потребуется точка останова с медиа-запросом.

Распространено создание трех наборов медиа-запросов для рабочего стола, планшета и телефона. Но если ваш дизайн выглядит хорошо на всех трех, зачем беспокоиться о сложности добавления трех разных медиа-запросов, которые не нужны. Делайте это по мере необходимости!

Роберт Роша
источник
3

Еще одна особенность - вы также можете использовать медиа-запросы в атрибуте медиа<link> тега.

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

При этом браузер загрузит все CSS-ресурсы независимо от атрибута media . Разница в том, что если media-запрос атрибута media оценивается как false, то этот файл .css и его содержимое не будут блокировать рендеринг.

Поэтому рекомендуется использовать атрибут media в <link>теге, поскольку он гарантирует лучшее взаимодействие с пользователем.

Здесь вы можете прочитать статью Google об этой проблеме https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css.

Некоторые инструменты, которые помогут вам автоматизировать разделение кода CSS на разные файлы в соответствии с вашими медиа-запросами.

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

Хуанма Менендес
источник
2

Поведение не меняется на рабочем столе. Но на планшетах и ​​мобильных телефонах я расширяю панель навигации, чтобы охватить большое изображение логотипа. Примечание. Используйте поля (верх и низ) столько, сколько вам нужно для высоты вашего логотипа.

Для моего случая 60px top и bottom работали отлично!

@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}

Проверьте навигационную панель здесь .

Пратик Хадлоя
источник
2
  • Очень маленькие устройства ~ Телефоны (<768 пикселей)
  • Маленькие устройства ~ планшеты (> = 768 пикселей)
  • Средние устройства ~ десктопы (> = 992px)
  • Большие устройства ~ десктопы (> = 1200px)
Бекзат
источник
2

Я использую следующий, чтобы сделать свою работу.

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

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

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
Маянк Дудакия
источник
-1
@media (max-width: 767px)   {

      .container{width:100%} *{color:green;}-Mobile

    }


    @media (min-width: 768px)  {

     .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 768px) and (orientation:portrait)  {

       .container{width:100%} *{color:yellow  } -Mobile

    }
    @media (min-width: 1024px)  {

       .container{width:100%} *{color:pink  } -Desktop

    }
    @media (min-width: 1200px)  {

    .container{width:1180px} *{color:pink   } -Desktop

    }
Shailesh
источник