Ich habe eine Frage zur Arbeitsweise der Browser.
Mir ist aktuell nicht klar, wie die CSS-Angaben vom Browser interpretiert werden - gibt es da eine Priorität? Arbeitet ein Browser die Angaben von oben nach unten ab?
Wie sieht das bei Media Queries aus?
Ich gehe bisher davon aus, dass ich in der css-Datei zuerst Angaben mache, die für meine Seite gültig sind. Die Media Queries-Angaben werden dann (im Falle des Falls - also z.Bsp. WENN die Anzeige größer als 600px ist) umgesetzt. Ist das so korrekt?
BEISPIEL: Ich möchte gern ab 600px Viewport-Breite eine feste Breite von 600px festlegen. Bei kleineren Viewports, soll die maximale Breite 480px betragen. Ich möchte gern (grundsätzlich) eine Mindestbreite von 300px.
Wenn ich <body> Eigenschaften zuweise, z.Bsp:
und dann zusätzlich eintrage:
funktioniert das aber nicht. Die min/max-Angaben bleiben gültig.
Was mache ich falsch?
Vielen Dank für Tipps und Hinweise!!
Mir ist aktuell nicht klar, wie die CSS-Angaben vom Browser interpretiert werden - gibt es da eine Priorität? Arbeitet ein Browser die Angaben von oben nach unten ab?
Wie sieht das bei Media Queries aus?
Ich gehe bisher davon aus, dass ich in der css-Datei zuerst Angaben mache, die für meine Seite gültig sind. Die Media Queries-Angaben werden dann (im Falle des Falls - also z.Bsp. WENN die Anzeige größer als 600px ist) umgesetzt. Ist das so korrekt?
BEISPIEL: Ich möchte gern ab 600px Viewport-Breite eine feste Breite von 600px festlegen. Bei kleineren Viewports, soll die maximale Breite 480px betragen. Ich möchte gern (grundsätzlich) eine Mindestbreite von 300px.
Wenn ich <body> Eigenschaften zuweise, z.Bsp:
Code:
body {
min-width: 300px;
max-width: 480px;
margin: 0 auto;
}
und dann zusätzlich eintrage:
Code:
@media screen and (min-width: 600px) {
body {
width: 600px;
}
}
funktioniert das aber nicht. Die min/max-Angaben bleiben gültig.
Was mache ich falsch?
Vielen Dank für Tipps und Hinweise!!