Moin Allerseits
ich beschäftige mich gerade mit der Erstellung von CSS-Regeln für mobile Endgeräte und hab da einige Verständnisfragen bez. Mediaqueries.
Es wäre toll wenn hier mal jemand einem alten Mann über die Strasse helfen könnte
Vom Ansatz her scheint es ja nicht so wahnsinnig kompliziert zu sein - man schreibt für bestimmte Browserfenstergrößen oder Displaygrößen unterschiedliche Regeln ...
Aber....
1: sind folgende Aussagen korrekt?
a: @media only screen and (width : 320px) greift nur einer Breite von genau 320px?
b: @media only screen and (min-width : 320px) and (max-width : 480px) greift bei allen Breiten zwischen 320px und 480px
Und jetzt zu einigen Fragen die ich vielleicht nicht besonders verständlich formulieren kann:
Wenn ich "min-width" anstatt "min-device-width" nutze dann bezieht sich das ja auf die Browserfenstergröße ("min-width") und nicht auf die Größe des Displays ("min-device-width").
Wenn ich also mein Handy (320 x 480) von "Portrait" auf "Landscape" kippe - was für eine Breitenangabe muss ich machen wenn ich für "landscape" andere CSS-Regeln will ?
Die des Gerätes (320) oder die Breite die es jetzt quasi geometrisch einnimmt - also 480?
Muss ich also zwei Mediaqueries für ein und das selbe Gerät anlegen (Hochformat & Querformat)?
Frage zwei
Ich will ein Gerät ansprechen das 320 x 480 hat
Dann habe ich ein weiteres Exotengerät mit 380 x 460 für das ich andere Regeln brauche
Wie müssen nun die Queries lauten?
Was ich bereits herausfinden konnte ist, das das hier nicht geht:
@media only screen and (min-width : 320px) and (max-width : 480px)
@media only screen and (min-width : 380px) and (max-width : 460px)
Die zweite Querie überschreibt nicht die Erste (was ja auch richtig ist) greift aber auch nicht.
Was auch nicht geht ist das: @media only screen and (width : 380px) denn das würde dazu führen das diese Regeln auch für alle Telefone mit 320 x 480 gilt.
Und genau das ist mein grösstes Verständnisproblem.
Wie kann ich etappenweise Media-Queries aufbauen?
Und dann..... hab ich gelesen das es ja auch noch so was gibt:
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
Wieso braucht es denn jetzt noch die Angabe zur Lage wenn es doch ohnehin um die durch Drehen nicht veränderbare Breite des Geräts geht??
Gruß Axel