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

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

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

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

# 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)

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

Ответ 1

IMO - это лучшие точки останова:

@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, в основном b/c ems лучше обеспечивают масштабирование. При стандартном увеличении 1em === 16px. Умножьте пиксели на 1em/16px, чтобы получить ems. Например, 320px === 20em.

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

Ответ 2

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

Для iPhone

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

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

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

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

Ответ 3

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

Общая мудрость general wisdom состоит в том, чтобы не предназначаться для конкретных устройств или размеров, а перефразировать термин "точка останова":

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

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

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

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

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

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

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

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

Ответ 4

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

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

@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;
  }
}

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

Ответ 5

Лучшие точки останова, рекомендованные 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) {

    }

Ответ 6

Запросы к мультимедиа для общих точек останова устройства

/* 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 */
}

Ответ 7

Дополнительные небольшие устройства (телефоны, до 480 пикселей)
Маленькие устройства (планшеты, 768px и выше)
Средние устройства (большие планшеты для ландшафтов, ноутбуки и рабочих столов, 992px и выше).
Крупные устройства (большие рабочие столы, 1200 пикселей и выше)
портретные электронные книги (Nook/Kindle), меньшие таблетки - минимальная ширина: 481px
портретные планшеты, портрет iPad, пейзажные электронные книги - min-width: 641px
планшет, альбом iPad, ноутбуки с низким разрешением - min-width: 961px
HTC Одна ширина устройства: 360px device-height: 640px -webkit-device-pixel-ratio: 3
Samsung Galaxy S2 - ширина устройства: 320 пикселей: высота устройства: 534px -webkit-device-pixel-ratio: 1,5 (min-moz-device-pixel-ratio: 1.5), (-o-min-device-pixel -ratio: 3/2), (отношение min-device-pixel: 1,5
Samsung Galaxy S3 - ширина устройства: 320 пикселей. Высота устройства: 640 пикселей. -webkit-device-pixel-ratio: 2 (min - moz-device-pixel-ratio: 2), - Старые браузеры Firefox (до Firefox 16 ) -
Samsung Galaxy S4: ширина устройства: 320 пикселей. Высота устройства: 640 пикселей. -webkit-device-pixel-ratio: 3.
LG Nexus 4: ширина устройства: 384px Высота устройства: 592px -webkit-device-pixel-ratio: 2
Asus Nexus 7 - ширина устройства: 601px высота устройства: 906px -webkit-min-device-pixel-ratio: 1.331) и (-webkit-max-device-pixel-ratio: 1.332)
iPad 1 и 2, iPad Mini-ширина устройства: 768px высота устройства: 1024px -webkit-device-pixel-ratio: 1
IPad 3 и 4 ширина устройства: 768px высота устройства: 1024px -webkit-device-pixel-ratio: 2)
Размер устройства 3G для iPhone: 320 пикселей: высота устройства: 480 пикселей -webkit-device-pixel-ratio: 1)
iPhone 4: ширина устройства: 320 пикселей. Высота устройства: 480 пикселей. -webkit-device-pixel-ratio: 2)
Размер экрана устройства iPhone 5: 320px высота устройства: 568px -webkit-device-pixel-ratio: 2)

Ответ 8

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

Запросы

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

Ответ 9

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

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

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

Ответ 10

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

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

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

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

Ответ 11

В настоящее время наиболее распространенным явлением является просмотр устройств экрана сетчатки, другими словами: устройства с высоким разрешением и очень высокая плотность пикселей (но обычно размер меньше 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

Ответ 12

Еще одна особенность - вы также можете использовать медиа-запросы в медиа- атрибуте <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

Ответ 13

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

Ответ 14

Что касается 2019 года, я использую следующее:

Наличие всего CSS для рабочего стола на style.css

Все медиа-запросы на responseive.css: все CSS для отзывчивого меню + медиа-точки останова

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

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

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

@media only screen and (min-width: 992px){ ... }

Ответ 15

@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

    }

Ответ 16

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

/* 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 */
}