Ширина

Базовая Широко поддерживается

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Свойство 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;
  }
}

Результат

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

Спецификация
Уровни запросов сред 4 # ширина

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`width`	1	12	2	10	3	18	4	10.1	1	1.0	≤37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width