Медіа запити

На сьогоднішній день макет веб-сайту повинен адаптуватися не тільки до комп'ютерів, але і до планшетів, мобільних пристроїв і навіть телевізорів.

Медіа-запит - це функція CSS3, яка використовується для адаптації макета веб-сторінки до різних розмірів екрану і типів пристроїв.

Алгоритм застосування стилів наступний:

Розробник описує набір медіа-запитів і CSS-правил всередині них.
Браузер відстежує зміну розміру в'юпорту.
Браузер застосовує CSS-правила з медіа-запитів, що відповідають поточному розміру в'юпорту.

Тобто медіа-запити - це інструкції на зразок: «коли сторінку відкрили на десктопі, я хочу, щоб колір тексту був червоним, а у разі відкриття на телефоні - зеленим».

Синтаксис

@media media type and (condition: breakpoint) {
  // Правила CSS
}

Медіа-запит - це спеціальна CSS-конструкція, яка оголошується директивою @media, за якою може йти тип пристрою (media-type) і медіа-функції (media-feature) - вирази, що перевірять характеристики пристрою (наприклад ширину в'юпорту). Медіа-функція - це логічний вираз, який повертає істину (вірно) або хибність (невірно).

Наприклад, якщо необхідно зробити фон <body> помаранчевим при ширині в'юпорту 900px і ширше, необхідно записати наступний медіа-запит.

styles.css
@media screen and (min-width: 900px) {
  body {
    background-color: orange;
  }
}

Людською мовою це можна прочитати як: «якщо сторінка відображається на екрані, ширина якого не менше 900 пікселів, необхідно застосувати вказане CSS-правило».

Наприклад, потрібно збільшити розмір шрифту для мобільних пристроїв. Для цього потрібно встановити максимальну ширину, яка перевіряє ширину пристрою:

.text {
  font-size: 14px;
}@media (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Зазвичай розмір тексту становить 14 пікселів. Однак, оскільки застосовано медіа-запит, він зміниться до 16 пікселів при максимальній ширині пристрою 480 пікселів і менше.

Типи пристроїв

Типи пристроїв розміщуються відразу після правила @media. Якщо тип не вказано, правило @media вибирає всі типи за замовчуванням. Існує безліч видів пристроїв, проте їх можна розділити на 4 категорії:

all - для всіх типів пристроїв;
print - для принтерів;
screen - для екранів комп'ютерів, планшетів і смартфонів;
speech - для скрінрідеров, які «читають» сторінку вголос.

Наприклад, щоб вибрати тільки екрани, потрібно встановити ключове слово screen відразу після правила @media. Правила також необхідно об'єднати ключовим словом «and»:

@media screen and (max-width: 480px) {
  .text {
    font-size: 16px;
  }
}

Точки зупинки

Точка зупинки (break point)- це ключ, який визначає, коли слід змінити макет і адаптувати нові правила всередині медіа-запитів.

У прикладі:

@media screen and (max-width: 480px) {
.text {
font-size: 16px;
}
}

Тут точка зупинки становить 480 пікселів. Тепер медіа-запит знає, коли встановлювати або перезаписувати новий клас. Якщо ширина пристрою менше 480 пікселів, то буде застосований клас text.

Метатег viewport

Сторінки, адаптовані для перегляду на різних типах пристроїв, повинні містити в розділі <head> метатег viewport.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Властивість width визначає віртуальну ширину вікна перегляду, значення device-width - фізичну ширину пристрою. Іншими словами, width відображає значення document.documentElement.clientWidth, а device-width - screen.width. При першому завантаженні сторінки властивість initial-scale керує початковим рівнем масштабування, initial-scale = 1 означає, що 1 піксель вікна перегляду = 1 піксель CSS.

На які розміри екрану потрібно орієнтуватися

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

Поширені точки зупинки:

320px - 480px: мобільні пристрої;
481px - 768px: планшети;
769px - 1024px: маленькі екрани, ноутбуки;
1025px - 1200px: великі екрани;
1201px і більше - дуже великі екрани, телевізори.

Інші точки зупинок:

/* Smartphones (вертикальна  і горизонтальна орієнтація) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {
/* стилі */
}

/* Smartphones (горизонтальна) ----------- */
@media only screen and (min-width: 321px) {
/* стилі */
}

/* Smartphones (вертикальная) ----------- */
@media only screen and (max-width: 320px) {
/* стилі */
}

/* iPads (вертикальна і горизонтальна) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* стилі */
}

/* iPads (горизонтальна) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* стилі*/
}

/* iPads (вертикальна) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
/* стилі */
}

/* iPad 3**********/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* стилі */
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* стилі */
}

/* Настільні комп'ютери і ноутбуки ----------- */
@media only screen  and (min-width: 1224px) {
/* стилі */
}

/* Великі екрани ----------- */
@media only screen  and (min-width: 1824px) {
/* стили */
}

/* iPhone 4 ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* стилі */
}
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* стилі */
}

/* iPhone 5 ----------- */
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стили */
}

/* iPhone 6 ----------- */
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стилі */
}

/* iPhone 6+ ----------- */
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стилі */
}
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стилі */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стилі */
}
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стилі */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* стилі */
}
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* стилі */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* стилі */
}
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* стилі */
}

Медіа-функції

Дві медіа-функції, що найчастіше використовуються і дозволяють визначати ширину в'юпорту браузера - min-width і max-width. Вказується мінімальна (min-width) або максимальна (max-width) допустима ширина в'юпорту, за якої застосовуються правила з медіа-запитів.

Чуйність є обов'язковим параметром в сучасній області веб-дизайну і розробки, а медіа-запити - одні з найбільш важливих частин створення чуйних макетів.

Приклади застосування медіа-запитів

Приклад 1 See the Pen <a href='https://codepen.io/raisa69/pen/LYNXwQX'>media queries</a> by kravets (<a href='https://codepen.io/raisa69'>@raisa69</a>) on <a href='https://codepen.io'>CodePen</a>.

Приклад 2 See the Pen <a href='https://codepen.io/raisa69/pen/rNeQXqd'>media-maket-flex</a> by kravets (<a href='https://codepen.io/raisa69'>@raisa69</a>) on <a href='https://codepen.io'>CodePen</a>.

Приклад 3 See the Pen <a href='https://codepen.io/raisa69/pen/JjXegqx'>media-menu-device</a> by kravets (<a href='https://codepen.io/raisa69'>@raisa69</a>) on <a href='https://codepen.io'>CodePen</a>.

Медіа запити

Синтаксис

@media media type and (condition: breakpoint) {

Типи пристроїв

Точки зупинки

Метатег viewport

На які розміри екрану потрібно орієнтуватися

Медіа-функції

Приклади застосування медіа-запитів

Рекомендоване відео для перегляду:

Контактна форма

Медіа запити

Синтаксис

@media media type and (condition: breakpoint) {

Типи пристроїв

Точки зупинки

Метатег viewport

На які розміри екрану потрібно орієнтуватися

Медіа-функції​

Приклади застосування медіа-запитів

Рекомендоване відео для перегляду:

Контактна форма

Медіа-функції