aspect-ratio

Базовая Широко доступная

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

Свойство aspect-ratio CSS media feature может использоваться для проверки соотношения сторон viewport.

Синтаксис

Функция aspect-ratio задается как <ratio> значение, представляющее соотношение ширины к высоте viewport. Это функция диапазона, что означает, что вы также можете использовать префиксные min-aspect-ratio и max-aspect-ratio варианты для запроса минимальных и максимальных значений соответственно.

Примеры

Пример ниже находится в <iframe>, который создает собственный viewport. Измените размер <iframe> , чтобы увидеть aspect-ratio в действии.

Обратите внимание, что когда ни одно из условий media query не выполняется, фон станет белым, поскольку ни одно из приведенных ниже правил не будет применено к <div> внутри <iframe>. Попробуйте найти значения ширины и высоты, которые вызывают это!

HTML

<div id="inner">
  Watch this element as you resize your viewport's width and height.
</div>

CSS

/* Minimum aspect ratio */
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /* blue */
  }
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff; /* cyan */
  }
}

/* Exact aspect ratio, put it at the bottom to avoid override*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /* red */
  }
}

Результат

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

Спецификация
Media Queries Level 4 # aspect-ratio

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`aspect-ratio`	3	12	3.5	10	5	18	4	10.1	4.2	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/aspect-ratio