Встречается на собеседованиях • сегодня

Какие параметры передаются в @media кроме min-width и max-width

Основные параметры @media (медиа-функции) помимо min-width и max-width:

  1. Ориентация устройства
    orientation: portrait | landscape

  2. Плотность пикселей
    resolution: 2dppx (2x ретина)
    min-resolution: 192dpi

  1. Тип устройства
    hover: hover | none (есть ли ховер)
    pointer: fine | coarse (точность ввода)

  2. Цветовые схемы
    prefers-color-scheme: light | dark
    prefers-contrast: more | less

  3. Движение
    prefers-reduced-motion: reduce (анимации)

Пример:

css
@media (orientation: landscape) {
  .sidebar { width: 30%; }
}

@media (prefers-color-scheme: dark) {
  body { background: #222; }
}
Sophi
Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
Попробовать бесплатноArrow

Следующий вопрос

Это единственный вопрос по вашему фильтру

как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы