Стаття також доступна російською (перейти до перегляду).

Зміст:

• Коли доцільно їх застосування
• Підключення медіа запиту через у шапці сайту зі стилями, які прописані в окремому файлі CSS
• Як записати медіа запит у загальному CSS файлі
• Розглянемо синтаксис написання медіа запитів
• Приклади написання медіа запитів
• Висновки

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

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

Також необхідно дотримуватися норм щодо Core Web Vitals.

Для того, щоб щоразу завантажувати не всі стилі, а лише ті, які нам необхідні, і існують медіа-запити CSS, вони ж - медіа-висловлювання CSS.

Медіа запити (media queries) – це правила CSS, що дозволяють керувати стилями елементів залежно від значень технічних параметрів (висота та ширина браузера, роздільна здатність сторінки, типу пристрою, його орієнтації, щільності пікселів тощо). Вперше почали застосовуватись у CSS 3.

Коли доцільно їх застосування

Сторінка зверстана у кілька колонок

Трьох колонковий дизайн досить часто зустрічається в HTML верстці.

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

Необхідно “конвертувати” ці три колонки на одну.

Різна величина шрифтів

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

Необхідно встановити окремі стилі для мобільних пристроїв.

Докладніше про підключення нестандартних шрифтів та оптимізацію швидкості їх завантаження дивіться у статті-мануалі тут.

Різні відступи між блоками та полями

Вимоги по margin та padding для мобільних, комп'ютерів та планшетів різні.

Тому, те, що зручно виглядає на ширококутних моніторах, на смартфоні стиснеться в одну купу і налізе один на одного.

Також сторінка не буде оптимізована під використання мобільних пристроїв.

Докладніше про таку оптимізацію, а також про оптимальну відстань між блоками для мобільної верстки дивіться за вказаним посиланням.

Уникнення горизонтального прокручування

Якщо Ви вкажете фіксовану ширину блоку, наприклад width=960px, то на ширококутному моніторі сторінка виглядатиме красиво та зручно. А ось на смартфонах та інших моніторах виникне горизонтальне прокручування. Тому для кожного типу пристрою слід вказувати ширину.

Або скористайтеся властивостями CSS max-width, min-width.

Зручність навігації

Панель управління та меню сайтів десктопних комп'ютерів та смартфонів – це різні речі. Тому навігація для комп'ютерів та смартфонів має реалізовуватися по-різному.

Непотрібні елементи для мобільної верстки

Деякі елементи, які використовуються для десктопної версії сайту, у мобільній версії практично не використовуються та не потрібні. Застосовуйте властивість display:none при застосуванні медіа запитів CSS і Ви заберете непотрібні для мобільної версії блоки.

Роздільна здатність екрана в наш час коливається від 320 px для телефонів до 2560 px для ширококутних моніторів.

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

Обидва способи рівнозначні.

Підключення медіа запит через <link> у шапці сайту зі стилями, які прописані в окремому файлі CSS

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

Його можна підключити через <link rel="styleet".

При підключенні таблиці стилів використовуємо атрибут media встановлюємо медіа запит і вказуємо умови, за яких вони повинні використовуватися.

href="/assets/mobile.css - вказуємо шлях до файлу CSS зі стилями для цього медіа запиту;

Так стилі слід записувати, якщо вони рознесені до різних CSS файлів.

Ключове слово "@media..." з умовами щодо нього писати не потрібно.

 

Як записати медіа запит у загальному CSS файлі

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

Не забудьте про ключове слово “@media” та умови щодо нього.

Розглянемо синтаксис написання медіа запитів

Типи пристроїв, для яких зазначено це правило:

• screen - тип пристрою, у якому застосовуватиметься це правило. У разі це дисплей (экран);
• print – принтер або режим попереднього перегляду сторінки перед друком;
• all - всі типи пристроїв;
• speech – гаджети, які читають контент з екрану (скринрідери).

Умови медіаи запитів поділяються основними логічними операторами:

• and - потрібно виконання всіх зазначених умов;
• кома, - потрібно виконання однієї із зазначених умов;
• not – заперечення зазначеної умови. Тобто. якщо вказана умова не виконується.
• У круглих дужках зазначаються медіа функції. Це найпростіші функції, які сприймаються як правило.

Для вказівки розмірів існує 7 основних значень:

• min-width;
• max-width;
• width;
• min-height;
• max-height.
• height.

Для вказівки орієнтації мобільного пристрою:

• orientation

З цим значенням встановлюються певні стилі, залежно від того, в якому режимі (альбомному чи портретному) відображатиметься сайт. Тобто. в якому положенні користувач триматиме мобільний пристрій: у горизонтальному або вертикальному.

Примеры написания медиа запросов

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

Для зручності їх можна копіювати прямо в стилі CSS разом з коментарями.

@media screen and (max-widht:1080px)
{
.container {
margin: 48px;
line-height: 29px;
font-size:16px;
}
}

/*Це правило призначене для дисплеїв/браузерів шириною не більше 1080 px. Якщо ширина екрана буде більше 1080 px, то стилі, які будуть задані у фігурних дужках, будуть ігноруватися.*/

@media (max-width: 1920px)
{
.container {
margin: 48px;
line-height: 29px;
font-size:16px;
}
}

/*Це правило призначене для дисплеїв/браузерів з шириною більше 1920 px. Якщо ширина екрана буде іншою, то стилі, які будуть задані у фігурних дужках, будуть ігноруватися.*/

@media (min-width: 1080px) and (max-width: 1920px)
{
.container {
margin: 48px;
line-height: 29px;
font-size:16px;
}
}

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

@media (min-height: 720px)
{
.container {
margin: 48px;
line-height: 29px;
font-size:16px;
}
}

/*Це правило призначене для дисплеїв/браузерів з висотою 720 px. Якщо висота екрана буде іншою, то стилі, які будуть задані у фігурних дужках, будуть ігноруватися.*/

@media (orientation: landscape) {

body { flex-direction: row; }

/* При альбомному (горизонтальному) відображенні сайту його блоки відображатимуться в рядок */

}@media (orientation: portrait) {
body {
flex-direction: column;
}
}

/* При портретному (вертикальному) відображенні сайту його блоки відображатимуться вертикально */

Медіа запити найчастіше слід застосовувати, якщо під час перевірки виникають такі проблеми:

• Шрифт надто дрібний;
• Блоки розташовані надто близько;
• З'являється горизонтальне прокручування.

Висновки

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

З написаного вище можна зробити такі висновки щодо медіа виразів:

• Запит складається з ключового слова @media, однієї або кількох умов з логічними операторами для їх комбінування та CSS стилів, які необхідно застосувати у разі виконання умов;
• Найпоширеніші умови – це min-width, max-width;
• Вирази у загальних CSS файлах необхідно записувати після всіх стилів;
• Вирази з великим об'ємом CSS стилів записуйте в окремий файл з прив'язкою посилання на нього в основному HTML документі. При цьому ключове слово @media з фігурними дужками до нього в цьому окремому файлі не потрібно писати, тільки CSS стилі;
• Використовуйте вирази для оптимізації мобільної верстки, недопущення горизонтального прокручування, оптимізації розміру шрифтів.

При написанні цієї статті використовувалися матеріали від Олександра Мальцева, відео блогів Web Developer Blog, WebDev.

Підписуйтесь на наш телеграм – канал t.me/freehostua, щоб бути в курсі нових корисних матеріалів. Дивіться наш канал Youtube на youtube.com/freehostua.

Дата: 02.12.2021 Автор: Яременко Владислав за радакцією Євгена Шермана #css

Голосування 1 2 3 4 5