Comment puis-je détecter quelle dimension la fenêtre est plus juste en utilisant la requête des médias CSS?

StackOverflow https://stackoverflow.com/questions/8355244

  •  27-10-2019
  •  | 
  •  

Question

Quelqu'un sait comment créer une requête de médias qui se comportent comme ceci:

écran @media et (largeur supérieur à hauteur) {}

ou

écran @media et (hauteur inférieur à largeur) {}

Pour ce qui est dit dans la syntaxe spécification il est impossible d'utiliser « media_feature » en tant que valeurs. Y at-il solution de contournement SANS utiliser JavaScript? La chose la plus proche que je pouvais obtenir l'aide était rapport d'aspect, mais il ne fonctionnait pas.

Merci.

Était-ce utile?

La solution

Vous pouvez utiliser un média d'orientation requête: 

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

Des médias W3C Requêtes spec :

Le « orientation » caractéristique de médias est « portrait » lorsque la valeur de la caractéristique de médias « » de hauteur est supérieure ou égale à la valeur de la presse « largeur » fonctionnalité. Sinon, « orientation » est « paysage ».

Notez qu'il ne font généralement plus de sens à se soucier de la largeur réelle que l'orientation, voir cette article sur QuirksBlog pour plus de détails.

Autres conseils

@ réponse de N3dst4 ne fonctionne que si votre comparaison est 1: 1. Si vous êtes à la recherche d'une autre chose, vous pouvez utiliser

Deuxième coup sur google: http://css-tricks.com/6731- css-media-requêtes /

La première partie de l'exemple dans cette page:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

Utilisation max-width ou max-height est la même chose que "hauteur inférieure à" etc ..

va de même pour la hauteur.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top