nicht angemeldet
Hallo!
a: @media only screen and (width : 320px) greift nur bei einer Breite von genau 320px?
Ja,
b: @media only screen and (min-width : 320px) and (max-width : 480px) greift bei allen Breiten zwischen 320px und 480px
Ja, einschließlich 320px und 480px.
Werden "only" und "not" noch unterstützt?
Ja. Wieso sollten sie nicht mehr unterstützt werden? 😀
"only" wird praktisch nur verwendet, um die Regel vor alten Browsern zu verstecken (ich glaub das ist nicht mehr nötig). Und "not" ist sehr selten in Gebrauch.
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?
Letzteres. Beim Kippen ändert sich sowohl die "width" (Viewport) als auch die "device-width" (Display).
Für den Landscape-Mode kannst du daher ebenfalls "min-width: 480px" verwenden.
Muss ich also zwei Mediaqueries für ein und das selbe Gerät anlegen (Hochformat & Querformat)?
Wenn du unterschiedliche Formate/Layouts für die unterschiedlichen Viewportbreiten haben willst, dann ja.
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?
Warum brauchst du da andere Regeln...?
Der Sinn von Media Queries ist nicht gesonderte Formatierungen für jede mögliche Breiten-Höhen-Kombination zu schreiben. Das wären unzählige. Du schreibst Media Queries, wie es zum guten Layouten deiner Inhalte sinnvoll ist. Mehr nicht.
Die Frage ist ob sich deine Inhalte anders verhalten sollen bei 320px vs. 380px. Das kann ich dir nicht beantworten. Wahrscheinlich ist es nicht zwingend nötig hier einen Breakpoint zu machen.
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?
Was du mit etappenweise meist, verstehe ich nicht ganz. Es gibt verschiedene Ansätze, wie man Media Queries aufbaut. Die sogenannten "stacked MQs" und die "overlapping MQs" (siehe).
Bei den stacked MQs überschreiben sich Regeln nicht, bei den overlapping MQs überschreiben Regeln für größere Viewports die für kleinere Viewports.
Beispiele mit zwei Breakpoints bei 320px und 640px:
Stacked:
/* für Viewport-Breiten von 0px bis einschließlich 319px */
@media (max-width: 319px) {
.foo { color: red }
}
/* für Viewport-Breiten von 320px bis einschließlich 639px */
@media (min-width: 320px) and (max-width: 639px) {
.foo { color: blue }
}
/* für Viewport-Breiten von 640px bis unendlich */
@media (min-width: 640px) {
.foo { color: green }
}
Overlapping:
/* für alle Viewport-Breiten */
.foo { color: red }
/* für Viewport-Breiten von 320px bis unendlich, überschreibt die Regel oben */
@media (min-width: 320px) {
.foo { color: blue }
}
/* für Viewport-Breiten von 640px bis unendlich, überschreibt die Regeln oben */
@media (min-width: 640px) {
.foo { color: green }
}
(ungetestet)
Welchen Ansatz du wählst ist dir überlassen. Beide haben Vor- und Nachteile. Ich würde "overlapping" empfehlen in der Annahme dass du für größere Viewports wahrsch. nur wenige Regeln überschreiben musst.
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??
Das braucht man i. d. R. nicht! Für ein anpassbares Layout ist die Viewport Breite und manchmal auch die Viewport Höhe interessant. Es ist meist nicht wichtig wie das Gerät gehalten wird.
Grüße Danny
Matthias Apsel
Gunnar Bittersmann