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

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

417 голосов
/ 16 июня 2011

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

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

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

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

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

Ответы [ 16 ]

567 голосов
/ 09 сентября 2011

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

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

148 голосов
/ 16 июня 2011

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

для iPhone 

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

Для таблеток 

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

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

134 голосов
/ 03 декабря 2013

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

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

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

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

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

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

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

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

47 голосов
/ 20 октября 2013

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

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

23 голосов
/ 04 января 2017

Лучшие точки останова, рекомендованные 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 голосов
/ 02 июня 2016

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

/* 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 */
}
18 голосов
/ 05 ноября 2013
  1. Очень маленькие устройства (телефоны, до 480px)
  2. Небольшие устройства (планшеты, 768px и выше)
  3. Средние устройства (большие планшеты, ноутбуки и настольные ПК, 992px)и выше)
  4. Большие устройства (большие настольные ПК, 1200px и выше)
  5. портретные электронные книги (Nook / Kindle), меньшие планшеты - минимальная ширина: 481px
  6. портретпланшеты, портретный iPad, альбомная система чтения электронных книг - минимальная ширина: 641px
  7. планшет, планшетный iPad, ноутбуки с низким разрешением - min-ширина: 961px
  8. HTC One ширина устройства: устройство 360px-высота: 640px -webkit-device-pixel-ratio: 3
  9. Samsung Galaxy S2 ширина устройства: 320px высота устройства: 534px -webkit-device-pixel-ratio: 1,5 (мин. - moz-device-пиксельное соотношение: 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 deНедостатки: 320px device-height: 640px -webkit-device-pixel-ratio: 3
  12. LG Nexus 4 device-width: 384px device-height: 592px -webkit-device-pixel-ratio: 2
  13. Asus Nexus 7 ширина устройства: 601px высота устройства: 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: ширина устройства: 768px-высота устройства: 1024px -webkit-device-pixel-ratio: 2)
  16. iPhone 3G ширина устройства: 320px высота устройства: 480px -webkit-device-pixel-ratio: 1)
  17. iPhone 4 ширина устройства: 320px device-height: 480px -webkit-device-pixel-ratio: 2)
  18. iPhone 5 ширина устройства: 320px device-height: 568px -webkit-device-pixel-ratio: 2)
5 голосов
/ 16 октября 2014

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

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

4 голосов
/ 01 сентября 2016

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

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

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

2 голосов
/ 13 января 2019

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

Страница:
...