Медиавыражение CSS `width`

Медиавыражение width CSS медиазапроса можно использовать для проверки ширины области просмотра (или страницы для печатных носителей).

Синтаксис

Медиавыражение width задаётся значением <length>, представляющим ширину области просмотра. Это диапазонное выражение, то есть для запроса минимального и максимального значений можно также использовать варианты с префиксами min-width и max-width соответственно.

Примеры

HTML

<div>Watch this element as you resize your viewport's width.</div>

CSS

/* Exact width */
@media (width: 360px) {
  div {
    color: red;
  }
}

/* Minimum width */
@media (min-width: 35rem) {
  div {
    background: yellow;
  }
}

/* Maximum width */
@media (max-width: 50rem) {
  div {
    border: 2px solid blue;
  }
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Использование медиазапросов
• @media