nicht angemeldet
Moin Allerseits
ich beschäftige mit gerade zum ersten Mal 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 bei 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
Eine einfache Frage:
Werden "only" und "not" noch unterstützt?
Und jetzt zu einigen Fragen die ich vielleicht nicht besonders verständlich formulieren kann:
Frage eins:
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, dass 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 gelten. 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 physikalische Breite des Geräts geht??
Man sieht also: Ich bin unter anderem durch die gleichzeitige Verwendung der Attribute "Orientation" & "Width" irritiert.
Gruß Axel
Matthias Apsel
Gunnar Bittersmann