aspect-ratio
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
A característica de mídia CSS aspect-ratio
pode ser utilizada para testar a taxa de aspecto de sua viewport.
Sintaxe
A característica de aspect-ratio
é especificada como um valor de <ratio>
representando a relação de largura-para-altura em aspecto à sua viewport. É uma característica de diferencial, o que significa que você pode fazer uso de variações pré-fixadas de min-aspect-ratio
e max-aspect-ratio
para definir os os seus valores mínimos e máximos, respectivamente.
Exemplo
O exemplo abaixo está contido em um <iframe>
, que cria o seu próprio viewport. Redimensione o <iframe>
para ver o aspect-ratio
em ação !
HTML
<div id="inner">
Observe este elemento, conforme você altera a largura e a altura da sua
viewport.
</div>
CSS
/* Taxa de aspecto mínima */
@media (min-aspect-ratio: 8/5) {
div {
background: #9af; /* azul */
}
}
/* Taxa de aspecto máxima */
@media (max-aspect-ratio: 3/2) {
div {
background: #9ff; /* ciano */
}
}
/* Taxa de aspecto exata, coloque-a no final para evitar sobrescrita*/
@media (aspect-ratio: 1/1) {
div {
background: #f9a; /* vermelho */
}
}
Result
Especificações
Specification |
---|
Media Queries Level 4 # aspect-ratio |
Compatibilidade com navegadores
BCD tables only load in the browser