Какие знаешь свойства у @midea в CSS

Вопрос

Какие знаешь свойства у @midea в CSS

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает, как использовать медиазапросы для создания адаптивных интерфейсов, знает основные свойства и синтаксис @media, а также может применять их на практике.

Ключевые тезисы

• @media — это CSS-правило, которое позволяет применять стили в зависимости от условий (например, ширины экрана, ориентации устройства или типа медиаустройства).
• Основные свойства: min-width, max-width (для адаптации под разные размеры экранов), orientation (портретная или альбомная ориентация), resolution (плотность пикселей).
• Можно использовать логические операторы (and, not, only) для создания сложных медиазапросов.
• Пример: @media (min-width: 768px) and (max-width: 1024px) { ... } — стили для планшетов.
• Также поддерживаются медиатипы: screen (экранные устройства), print (печатные версии), speech (скринридеры).

Подробный ответ

@media — это мощное CSS-правило, которое позволяет применять стили в зависимости от различных условий, таких как размер экрана, ориентация устройства или тип медиаустройства. Основные свойства включают min-width и max-width, которые используются для адаптации стилей под разные размеры экранов. Например, min-width: 768px применяет стили только на устройствах с шириной экрана не менее 768 пикселей. Ориентация устройства может быть определена с помощью свойства orientation, которое имеет значения portrait (портретная ориентация) и landscape (альбомная ориентация). Свойство resolution позволяет адаптировать стили для устройств с высокой плотностью пикселей, таких как Retina-экраны. Логические операторы (and, not, only) позволяют создавать сложные медиазапросы, комбинируя несколько условий. Например, @media (min-width: 768px) and (max-width: 1024px) применяет стили только на устройствах с шириной экрана от 768 до 1024 пикселей. Медиатипы, такие как screen, print и speech, позволяют адаптировать стили для разных типов устройств. Например, медиатип screen используется для экранных устройств, а print — для печатных версий страниц.

Практические примеры

Пример 1

text
@media (min-width: 768px) and (max-width: 1024px) {
  body {
    background-color: lightblue;
  }
}

Пример 2

@media (orientation: landscape) {
  .header {
    height: 100px;
  }
}

Пример 3

@media (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
  }
}

Пример 4

@media screen and (max-width: 600px) {
  .menu {
    display: none;
  }
}

Частые ошибки

• Использование медиазапросов без учета порядка их применения, что может привести к переопределению стилей.
• Недостаточное тестирование медиазапросов на реальных устройствах, что может привести к некорректному отображению на некоторых экранах.

Связанные темы

• Адаптивный дизайн
• CSS Grid и Flexbox
• CSS переменные
• Оптимизация производительности веб-страниц

Follow-up вопросы

Как использовать @media для адаптации под мобильные устройства?

Уровень: basic

Используйте медиазапросы с max-width (например, 768px) для мобильных устройств. Пример: @media (max-width: 768px) { ... }. Можно добавить условия по orientation для портретного/альбомного режима.

Какие логические операторы поддерживаются в @media и как их применять?

Уровень: intermediate

Поддерживаются and, not, only и запятая (как OR). Пример: @media (min-width: 768px) and (orientation: landscape) { ... } — стили для широких экранов в альбомной ориентации.

Как оптимизировать @media для Retina-экранов?

Уровень: intermediate

Используйте медиазапрос с min-resolution или -webkit-min-device-pixel-ratio. Пример: @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... } — для Retina-дисплеев.

В чем разница между screen и print в @media?

Уровень: basic

screen — для экранов устройств (по умолчанию), print — для печатных версий страниц. В print можно скрыть ненужные элементы (например, навигацию) и настроить размеры шрифтов/отступов для печати.

Как использовать @media в связке с CSS-переменными?

Уровень: advanced

CSS-переменные (custom properties) можно переопределять внутри @media. Пример: :root { --main-color: blue; } @media (prefers-color-scheme: dark) { :root { --main-color: white; } } — темная тема по системным настройкам.