Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

device-aspect-ratio

Obsolète: Cette fonctionnalité n'est plus recommandée. Même si certains navigateurs la prennent encore en charge, elle a peut-être déjà été supprimée des standards du web, est en passe d'être supprimée ou n'est conservée qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible ; consultez le tableau de compatibilité au bas de cette page pour vous aider à prendre votre décision. Sachez que cette fonctionnalité peut cesser de fonctionner à tout moment.

Note : Pour interroger le rapport d'aspect de la zone d'affichage, il faut utiliser la caractéristique média aspect-ratio.

La caractéristique média CSS device-aspect-ratio peut être utilisée pour tester le rapport d'aspect largeur/hauteur d'un périphérique de sortie.

Syntaxe

La caractéristique device-aspect-ratio est définie sous la forme d'un ratio (type CSS <ratio>). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées min-device-aspect-ratio et max-device-aspect-ratio afin de cibler des règles en fonction de minimum ou maximum.

Exemples

css
article {
  padding: 1rem;
}

@media screen and (min-device-aspect-ratio: 16/9) {
  article {
    padding: 1rem 5vw;
  }
}

Spécifications

Specification
Media Queries Level 4
# device-aspect-ratio

Compatibilité des navigateurs