Колись створити вебсайт було простіше. Сьогодні макет вебсайту повинен адаптуватись не лише до комп’ютерів, але й планшетів, мобільних пристроїв і навіть телевізорів.

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

Що таке медіазапит?

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

Синтаксис

@media media type and (condition: breakpoint) {
  // CSS rules
}

Ми можемо націлити різні типи медіа за різних умов. Якщо умова та/або типи медіа зійдуться, тоді правила всередині медіазапиту будуть застосовані.

На перший погляд, синтаксис може здатись важким, тому розберемо кожну частину в деталях…

Правило @ media

Ми починаємо медіазапит з правила @ media і потім додаємо правила CSS всередині фігурних дужок. Правило @ media також використовують, щоб вказати націлені типи медіа.

@media () {
  // CSS rules
}

Парантеза

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

.text {
  font-size: 14px;
}

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

Зазвичай розмір тексту — 14px. Але ми застосували медіазапит, що змінить розмір на 16px, якщо пристрій має ширину 480px або менше.

Важливо: завжди розміщуйте медіазапити в кінці свого файлу CSS.

Типи медіа

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

• all — для всіх типів медіа
• print — для друкарських пристроїв
• screen — для екранів монітора
• speech — для читачів екрана

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

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

Контрольні точки

Контрольні точки — найпоширеніший термін. Контрольна точка є ключем, який визначає, коли потрібно змінити макет та адаптувати нові правила всередині медіазапитів. Повернемось до прикладу на початку:

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

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

Поширені контрольні точки: чи існує стандартна роздільна здатність?

Одне з найпоширеніших питань: «Яку контрольну точку використовувати?». Існує безліч пристроїв, тому ми не можемо визначити фіксовані контрольні точки для кожного.

По тій же причині ми не можемо сказати, що існує стандартна роздільна здатність, але все ж таки є поширені контрольні точки. Якщо ви використовуєте каркаси CSS (Bootstrap, Bulma тощо), то можете використати їхні контрольні точки.

Тепер розглянемо поширені контрольні точки:

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

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

Підсумки

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

Дякую, що прочитали!