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

Question

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

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

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

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

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

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

13 360

css css3 mobile media-queries tablet

13 ответов:

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

для iPhone
@media only screen and (min-device-width: 480px){}
для Android
@media only screen and (min-device-width: 768px){}
вот несколько хороших статей:

как подогнать ваш сайт под Apple iPad

CSS3 Media Queries

141

не ориентированы на конкретные устройства или размеры!

The мудрость и не ориентированы на конкретные устройства или размеры, но чтобы переформулировать термин "точка останова":

разработка сайта на или используя проценты или ems, а не пиксели,

затем попробуйте его в большом видовом экране и обратите внимание, где он начинает терпеть неудачу,

перепроектировать макет и добавить CSS медиа-запрос только для обработки сломанных части,

повторяйте процесс, пока не достигнете следующей точки останова.

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

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

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

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

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

126

я использовал этот сайт чтобы найти разрешение и разработанный CSS на фактические числа. Мои цифры довольно сильно отличаются от приведенных выше ответов, за исключением того, что мой css фактически попадает на нужные устройства.
кроме того, есть этот отладочный кусок кода сразу после вашего медиа-запроса: Например:
@media only screen and (min-width: 769px) and (max-width: 1281px) { /* 10 inch tablet enter here */
  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

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

    }

21

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

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

очень маленькие устройства (телефоны, до 480px)

небольшие устройства (планшеты, 768px и выше)

средние устройства (большие альбомные планшеты, ноутбуки и настольные компьютеры, 992px и выше)

большие устройства (большие настольные компьютеры, 1200px и выше)

портретные электронные ридеры (Nook / Kindle), меньшие планшеты - минимальная ширина:481px

портретные планшеты, портретный iPad, альбомные электронные ридеры-минимальная ширина: 641px

планшет, пейзаж iPad, lo-res ноутбуки-мин-ширина: 961px

HTC одно устройство-ширина: 360px устройство-высота: 640 пикселей -в WebKit-устройства-пикселей соотношение: 3

Samsung Галактики S2 устройства-ширина: 320px устройство-высота: 534px -в WebKit-устройства-пикселей соотношение: 1.5 (мин ... МОЗ-устройства-пикселей соотношение: 1.5), (-о-мин-устройства-пикселей соотношение: 3/2), (min-device-pixel-ratio: 1.5

устройства-ширина Samsung Галактики S3: 320 пикс устройство-высота: 640 пикселей -в WebKit-устройства-пикселей соотношение: 2 (мин ... МОЗ-устройства-пикселей соотношение: 2), - Старые браузеры Firefox (до Firefox 16) -

устройства-ширина Samsung Галактики S4: 320 пикс устройство-высота: 640 пикселей -в WebKit-устройства-пикселей соотношение: 3

LG Нексус устройства-ширина 4: 384px устройство-высота: 592px -в WebKit-устройства-пикселей соотношение: 2

Asus Nexus 7 устройство-ширина: 601px устройство-высота: 906px -в WebKit-мин-устройства-пикселей соотношение: 1.331) и (-в WebKit-Макс-устройства-пикселей соотношение: 1.332)

iPad 1 и 2, iPad Mini device-width: 768px device-height: 1024px-webkit-device-pixel-ratio: 1

устройства iPad, шириной 3 и 4: 768px по устройство-высота: 1024 Пикс.- в WebKit-устройства-пикселей соотношение: 2)

устройства-айфон 3Г ширина: 320 пикс устройство-высота: 480 пикселей -в WebKit-устройства-пикселей соотношение: 1)

устройства-iPhone 4 и ширина: 320 пикс устройство-высота: 480 пикселей -в WebKit-устройства-пикселей соотношение: 2)

устройства-iPhone 5 в ширина: 320 пикс устройство-высота: 568px -в WebKit-устройства-пикселей соотношение: 2)

17

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

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

5

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

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

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

4

следующие работал для меня. Поведение не меняется на рабочем столе. Но на планшетах и мобильных устройствах я расширяю панель навигации, чтобы покрыть большое изображение логотипа. Обратите внимание, что используйте поля (сверху и снизу) столько, сколько вам нужно для высоты вашего логотипа. Для моего случая 60px сверху и снизу работал отлично. Проверьте навигационную панель здесь.
@media (max-width:768px) { 
  .navbar-toggle {
      margin: 60px 0;
  }
}

2

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

Extra small devices ~ Phones (< 768px)
Small devices ~ Tablets (>= 768px)
Medium devices ~ Desktops (>= 992px)
Large devices ~ Desktops (>= 1200px)

0

@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

    }

0

ryanve · Accepted Answer · 2017-06-28 08:22:08

ИМО это лучшие точки останова:
@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 */ }
Edit: уточненный для того чтобы работать более лучше с 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-, или их комбинации, будьте осведомлены о порядке ваших правил, имея в виду, что если несколько правил соответствуют одному и тому же элементу, более поздние правила будут переопределять более ранние правила.