CSS ab Seitenverhältnis?

Hallo,

es ist ja in CSS möglich, ab einer bestimmten Breite Objekten andere CSS Eigenschaften zuzuordnen, allerdings haben viele Handys mittlerweile sehr höhe Auflösungen, was fast schon wieder einem Tablet oder PC ähnelt. Daher wollte ich wissen ob man statt einer bestimmten Breite auch ein Seitenverhältnis überprüfen kann.

LG

Answer 1

[DevDebugger]

@media (max-width: 768px) and (aspect-ratio: 16/9) {
  .my-element {
    font-size: 20px;
  }
}

CSS bietet eine Methode namens aspect-ratio an. Damit kannst du das Seitenverhältnis eines Elements überprüfen. Du kannst sie entweder als numerischen Wert oder als Verhältnis angeben. 

Wenn Du einen numerischen Wert angibst, wird das Seitenverhältnis als Verhältnis von Breite zu Höhe interpretiert. Beispielsweise würde der Wert 16:9 ein Seitenverhältnis von 16 Pixel Breite zu 9 Pixel Höhe bedeuten.

Um dann das Seitenverhältnis zu überprüfen musst du die Methode in einer media query verwenden. Das bedeutet zum beispiel in meinem beispiel code, dass du die Schriftgröße zum beispiel bei einem Handy mit einem Seitenverhältnis von 16:9 erhöhst, so funktioniert das natürlich mit beliebigen größen.

Answer 2

[daCypher]

Ja, du kannst das in der Media-Query mit dem keyword "orientation" machen.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation

Beispiel:

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

Comments

[DevDebugger]

Die Methode würde natürlich auch gehen, du kannst wie hier im beispiel landscape verwenden, dass gibt dann an dass der viewport in Querformat angezeigt wird. Es gibt noch eine Funktion orientation: portrait, dort kannst du den viewpoint im Hochformat anzeigen lassen wenn ich das richtig in erinnerung habe, nur als kleine Info, falls du sowas mal irgendwann brauchst @assistantmaster