CSS - Globale und spezifische Auszeichnung

[MainAngler]

Hallo,

wie ist es möglich, dass man zwischer gloabler Auszeichnung eine spezifische Auszeichnung (@media) nutzen kann und danach wieder mit globaler Auszeichnung weitermacht?

Kurze Erklärung:
Die Seite wird ganz normal aufgebaut z.B. mit header, nav, section und footer und per CSS wird auch alles einzeln ausgezeichnet.
Also stheet im CSS-Code alles nacheinander für header, nav, section und footer.
Nun ändert sich aber das Erscheinenungsbild z.B. für nav auf einem anderen Gerät und man greift mit Media Querys (@media) ein um das Aussehen anzupassen.

Nun frage ich mich wie bzw. warum es möglich ist, bei obigen Beispiel, nach der CSS-Anweisung für nav dann noch die CSS-Ausweisung für nav @media zu ändern und danach ganz normal ohne @media fortgefahren werden kann?!
Woher weiß das entsprechende Gerät was es nacheinander auswerten muss um die Seite richtig anzuzeigen?

Denke mal, ohne Beispiel ist es nicht verständlich, daher versuche ich hier ein kleines Beispiel zu schreiben.
Der Code muss nicht auf Richtigkeit hin überprüft werden, es geht um das @media welches zwischen dem anderen Code einfach nur für nav eingefügt wurde.

header {background:url(hintergrundbild.jpg)
height: 150px;}

nav {float:left;
height: 100px;}

@media (min-width:320px) {
   nav {float:none}
}

section {min-height:300px;}

footer {height:50px;}

Ich dachte immer, man müsse für andere Geräte diese nach dem eigentlichen CSS-Code angeben und nicht zwischendrin?
Also quasi so:

header {background:url(hintergrundbild.jpg)
height: 150px;}

nav {float:left;
height: 100px;}

section {min-height:300px;}

footer {height:50px;}

@media (min-width:320px) {
   nav {float:none}
}

Schön, wenn das wirklich möglich ist, damit es ggf. übersichtlich ist.

Doof nur, wenn sich im obigen Beispiel-Code auch der Inhalt in der section ändert , der dann ja auch dem @media hinzugefügt werden muss.
Dann geht die Übersichtlichkeit doch eher wieder verloren und das letzte Code-Biespiel wäre doch dann das bessere?!

 

[By3o]

moin,
@media mitten in der CSS habe ich ja noch nie gesehen, wo hast Du das denn her?
So wie ich es kenne und praktiziere wird einfach das @media definiert und dort kommt alles rein was sich vom Grundlayoute unterscheidet. Das funktioniert und Du hast die totale Übersicht, insbesondere wenn mehrere @media definiert werden, was ja heutzutage üblich ist bei umfangreichen Projekten.
... warum es möglich ist, daß das Systhem weiß, daß es sich um eine andere Auflösung handelt, auch mitten im Code ist, die doppelte Klammer { } , im Grunde aber nix anderes als wenn du den @media-bereich jeweils separiert aufführst, auch dort wird jeder @media-bereich in doppelte Klammern gesetzt.
LG

 

[MainAngler]

Auf der wird das so gezeigt.
Das hat mich ja eben auch verwundert!
Ich kenne es auch, dass es eben separat und nicht dazwischen geschrieben wird.
Ich muss mir das aber alles nochmal in Ruhe anschauen.

 

[By3o]

Da alle Browser den Quellcode von oben nach unten lesen, macht die plazierung zwischendrin wenig Sinn. Am besten ist es, mit der Smartphoneansicht zu beginnen und mit der Desktopansicht zu enden. Stichwort : mobile first

LG

 

[FredBow]

Ein Gedanke, der dafür sprechen könnte, das @media nicht ans Ende zu stellen:
Unter Umständen hat man viele, viele CSS Zeilen. Gerade, wenn man noch am "Basteln" ist, kann es sein, dass man am nav-Element Änderungen vornimmt und nicht mehr sieht/weiß, dass es ganz unten noch eine Media Query gibt, die das nav auch noch ändert. Dann gibt es ggf. Kuddelmudel und man versteht die Welt nicht mehr.
Vermutlich ist es aber wie vieles eine Frage des persönlichen Stils.

Fred