it-swarm.com.ru

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

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

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

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

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

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

388
betamax

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

@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, чтобы получить ems. Например, 320px === 20em.

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

530
ryanve

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

Для iPhone

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

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

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

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

144
sandeep

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

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

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

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

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

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

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

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

132
Dave Everitt
  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;
      }
    } 
    

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

46
user2060451

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

    }
22
Santosh Khalse

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

/* 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 */
}
20
Purvik Dhorajiya
  1. Очень маленькие устройства (телефоны, до 480px) 
  2. Маленькие устройства (планшеты, 768px и выше) 
  3. Средние устройства (большие ландшафтные планшеты, ноутбуки и Настольные компьютеры, 992px и выше) 
  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), (min-device-pixel-ratio: 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)
18
Web Designer cum Promoter

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

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

5
jumpjack

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

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

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

4
Robert Rocha

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

2
Ezequiel Adrian

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

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

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

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

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

Еще одна особенность - вы также можете использовать медиа-запросы в атрибуте media тега <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 оценивается как 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-pluginhttps://www.npmjs.com/package/media-query-splitting-plugin

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

0
Juanma Menendez