Медіа-запити: як націлити на настільний ПК, планшет і мобільний телефон?

Я займався деякими дослідженнями медіа-запитів, і досі не дуже розумію, як орієнтуватися на пристрої певних розмірів.

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

Я знайшов кілька прикладів:

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

Якими мають бути точки перерви для кожного пристрою?

ІМО - це найкращі точки прориву:

@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щоб отримати емс. Наприклад, 320px === 20em.

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

Не орієнтуйтеся на конкретні пристрої чи розміри!

Загальна мудрість це не орієнтовані на конкретні пристрої або розміри , але рефрейміровать термін «точка зупинки»:

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

Ви можете скористатися respovablepx.com для пошуку "природних" точок прориву, оскільки в "точках прориву мертві" Марк Драммонд .

Використовуйте природні точки прориву

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

Якщо ви не намагаєтеся прикріпити дизайн до точного розміру екрана, такий підхід працює, усуваючи необхідність націлювати конкретні пристрої . Цілісність самої конструкції на кожній точку гарантує , що вона буде тримати в будь-якому розмірі. Іншими словами, якщо меню / розділ вмісту / все, що перестає бути корисним для певного розміру, спроектуйте точку перерви для цього розміру , не для конкретного розміру пристрою.

Дивіться публікацію Лізи Гарднер про поведінкові точки прориву , а також публікацію Зельдмана про Етана Маркотта та про те, як розвивався чуйний веб-дизайн із задумливої ​​ідеї.

Використовуйте семантичну розмітку

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

Якщо ви хочете націлити на пристрій, тоді просто напишіть min-device-width. Наприклад:

Для iPhone

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

Для таблеток

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

Ось кілька хороших статей:

• Як встановити свій веб-сайт для Apple iPad
• CSS3 Media Queries

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

   Додайте цей елемент налагодження у кожен запит медіа, і ви побачите, який запит застосовано.

Кращі точки прориву, рекомендовані 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) {

    }

Запити медіа для загальних точок зупинки на пристрої

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

1. Невеликі пристрої (телефони, до 480 пікселів)
2. Невеликі пристрої (планшети, 768 пікселів і вище)
3. Середні пристрої (великі пейзажні планшети, ноутбуки та настільні комп’ютери, 992 пікселів і вище)
4. Великі пристрої (великі настільні комп'ютери, 1200 пікселів і вище)
5. портрети електронних читачів (Nook / Kindle), менші планшети - мінімальна ширина: 481px
6. портретні планшети, портрети iPad, електронні зчитувачі пейзажу - мінімальна ширина: 641px
7. планшет, ландшафтний iPad, ноутбуки lo-res - мінімальна ширина: 961px
8. HTC One-ширина пристрою: 360px висота пристрою: 640px -webkit-device-pixel ratio: 3
9. Ширина пристрою Samsung Galaxy S2: 320 пікселів висота пристрою: 534 пікселя-коефіцієнт пікселя-пристрій-піксель: 1,5 (хв - співвідношення пікселів-мозок-пристрій: 1,5), (-о-хв-коефіцієнт пікселя пристрою-пікселя: 3/2), (хв. Співвідношення між пристроєм і пікселями: 1,5
10. Ширина пристрою Samsung Galaxy S3: 320 пікселів висота пристрою: 640 пікселів - коефіцієнт пікселя-пристрій-піксель: 2 (хв. - співвідношення пікселів-мозок-пристрій: 2), - Старіші браузери Firefox (до Firefox 16) -
11. Ширина пристрою Samsung Galaxy S4: 320px висота пристрою: 640px -webkit-device-pixel ratio: 3
12. Ширина пристрою LG Nexus 4: 384 пікселів висота пристрою: 592 пікселів - коефіцієнт пікселя-пристрій-піксель: 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: 320 пікселів висота пристрою: 480 пікселів - коефіцієнт пікселя-пристрій-піксель: 1)
17. Ширина пристрою iPhone 4: 320 пікселів висота пристрою: 480 пікселів - коефіцієнт пікселя-пристрій-піксель: 2)
18. Ширина пристрою iPhone 5: 320 пікселів висота пристрою: 568 пікселів - коефіцієнт пікселя-пристрій-піксель: 2)

Це не питання кількості пікселів, це питання фактичного розміру (у мм або дюймів) символів на екрані, що залежить від щільності пікселів. Отже, "min-width:" та "max-width:" є марними. Повне пояснення цього питання тут: яке саме співвідношення пікселів пристрою?

Запити "@media" враховують кількість пікселів та коефіцієнт пікселів на пристрої, в результаті чого "віртуальна роздільна здатність" - це те, що потрібно насправді враховувати при розробці сторінки: якщо шрифт має 10px фіксованої ширини та " віртуальна горизонтальна роздільна здатність "становить 300 пікс. Для заповнення рядка знадобиться 30 символів.

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

Оскільки існує багато різних розмірів екрана, які завжди змінюються, і, швидше за все, завжди зміниться найкращий спосіб - це базувати свої точки перерви та медіа- запити на своєму дизайні.

Найпростіший спосіб зробити це - захопити завершений дизайн робочого столу та відкрити його у веб-браузері. Повільно стискайте екран, щоб він був вужчим. Поспостерігайте, коли дизайн починає «ламатися» або виглядає жахливо і тісно. У цей момент буде потрібна точка перерви з медіа-запитом.

Загальноприйнято створити три набори медіа-запитів для робочого столу, планшета та телефону. Але якщо ваш дизайн добре виглядає на всіх трьох, навіщо турбуватися зі складністю додавання трьох різних медіа-запитів, які не потрібні. Робіть це за потребою!

Ще однією особливістю є те, що ви також можете використовувати медіа-запити в медіа- атрибуті <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, незалежно від медіа- атрибута. Різниця полягає в тому, що якщо медіа-запит медіа-атрибута оцінюється як хибний то цей файл .css і його вміст не буде блокуватися візуалізацією.

Тому рекомендується використовувати атрибут media в<link> тезі, оскільки це гарантує кращу роботу користувачів.

Тут ви можете прочитати статтю Google про цю проблему https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Деякі інструменти, які допоможуть вам автоматизувати розділення коду css у різних файлах відповідно до ваших медіа-запитів

Вебпак 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

Поведінка не змінюється на робочому столі. Але на планшетах та мобільних пристроях я розширюю навігаційну панель, щоб охопити зображення великого логотипу. Примітка. Використовуйте поле (верхній і нижній) стільки, скільки потрібно для висоти логотипу.

У моєму випадку 60px зверху та знизу працювали чудово!

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

Перевірте Navbar тут .

• Надзвичайно малі пристрої ~ Телефони (<768px)
• Невеликі пристрої ~ Таблетки (> = 768 пікселів)
• Середні пристрої ~ Настільні ПК (> = 992 пікселів)
• Великі пристрої ~ Настільні ПК (> = 1200 пікселів)

Я використовую наступну для виконання своєї роботи.

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

@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

    }