@media — это правило стилей в CSS, которое позволяет задавать разные стили для разных устройств и разных размеров экрана.
Синтаксис правила @media следующий:
@media (media feature) {
/* правила стилей для этого media feature */
}media feature это логическое условие, которое задает устройство или размер экрана, для которого будут применяться определенные стили. Некоторые примеры media feature:
max-width: задает максимальную ширину экрана, для которой будут применяться стилиmin-width: задает минимальную ширину экрана, для которой будут применяться стилиorientation: задает ориентацию экрана (портретная или ландшафтная)
Например, следующий код задает стили для устройств с максимальной шириной экрана не более 768 пикселей:
@media (max-width: 768px) {
/* правила стилей для устройств с максимальной шириной экрана 768 пикселей */
}Эти стили будут применяться только на устройствах, чья ширина экрана не превышает 768 пикселей.
@media-правила позволяют создавать адаптивный дизайн и улучшать опыт пользователей на разных устройствах, а также улучшать SEO, так как Google ценит мобильную адаптивность.
