• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage CSS-Datei / wie interpretiert der Browser

A

annsen

Mitglied
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:

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!!
 
Werbung:
Ah ok... hast du vielleicht einen Link für diese Konstellationen/Prioritäten?

Zu den min/max-Angaben... ich möchte, dass die nur für kleine Viewports gelten - ab 600px sollen sie ungültig werden. Das heißt, ich pack die in ein MQ mit max-width: 599px? Und ab 600px gilt dann die oben genannte (feste) Breite von 600px?

Demnach macht es doch Sinn, Größenangaben ausschließlich in MQs zu packen? Wie macht man das am Besten in der Praxis - erst ein allgemeines CSS entwerfen und wenn man die Seite dann responsive macht, nach und nach die anzupassenden Einträge in MQs packen und im Absatz mit den "allgemeinen" Sheets löschen?

Macht so auf jeden Fall in der Theorie Sinn für mich...
 
Werbung:
Hallo

hast du vielleicht einen Link für diese Konstellationen/Prioritäten?
Zum Vergrößern anklicken....

Nein. Die würden auch ein ganzes Buch füllen.

Das heißt, ich pack die in ein MQ mit max-width: 599px? Und ab 600px gilt dann die oben genannte (feste) Breite von 600px?
Zum Vergrößern anklicken....

Was sinnvoll ist hängt von der gesamten Webseite und ihrem Inhalt ab. In der Theorie gibt es viele zunächst sinnvoll erscheinende Lösungen, die in er Praxis dann aber Probleme bereiten.

In der Praxis hat es sich als sinnvoll erwiesen für Media Queries entweder nur min-width (Mobile First) oder max-width (Desktop First) zu verwenden. Auch um bei immer unfangreicher werdenden Quelltext selbst die Übersicht zu behalten.

Deshalb solltest du dich auch bei inhaltslosen theoretischen Beispielen mit wenig Quelltext wie deinem daran halten.

Meist wird die Mobile-First-Variante empfohlen. Dem kann ich mich aus meiner Praxis anschließen.

Demnach macht es doch Sinn, Größenangaben ausschließlich in MQs zu packen?
Zum Vergrößern anklicken....

Ja. Aber wohl aus anderen Gründen die dir vorschweben.

Wie macht man das am Besten in der Praxis - erst ein allgemeines CSS entwerfen und wenn man die Seite dann responsive macht, nach und nach die anzupassenden Einträge in MQs packen und im Absatz mit den "allgemeinen" Sheets löschen?
Zum Vergrößern anklicken....

Ja. Aber auch aus anderen Gründen die dir wohl grade vorschweben. Für Webseiten mit Inhalt ist es sinnvoll mehrere unabhängige Media Query-Reihen zu erstellen.

Für die von dir gewünschte Darstellung kannst du folgendes CSS verwenden:

Code: 
   @media all {
      body {
         min-width: 300px;
         max-width: 480px;
   }
   @media only screen and (min-width: 600px) {
      body {
         max-width: 600px;
      }
   }

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben