Медіазапити - це частина CSS, яка дозволяє налаштовувати стилі в залежності від параметрів екрана, таких як ширина, висота або тип пристрою. Вони використовуються для створення адаптивного дизайну, який оптимально відображатиметься на будь-яких пристроях.
Наприклад, за допомогою медіазапитів можна задавати різні стилі для мобільних пристроїв, планшетів та настільних комп'ютерів, забезпечуючи оптимальне відображення контенту на кожному з них.
/* Загальні стилі для всіх пристроїв */
body {
font-size: 16px;
color: #333;
}
/* Стилі для пристроїв з шириною екрану більше 600px */
@media (min-width: 600px) {
body {
font-size: 18px;
}
}
/* Стилі для пристроїв з шириною екрану більше 1200px */
@media (min-width: 1200px) {
body {
font-size: 20px;
}
}