Mehrere @media only screen's in Css verwenden?

...komplette Frage anzeigen

3 Antworten

Kurz und knapp: Die im ersten Media Querie definierte Formatierung mit der vom darauf folgenden Media Querie überschrieben wird. Wenn du deine Website responsive machen möchtest, dich auch mit den unterschiedlichen Konzepten (mobile- oder middle-first) vertraut machen solltest. 

Anstatt mit max-width die maximale Breite zu bestimmen, besser mit min-width arbeitest. Wenn du deine Website nach dem mobile-first Konzept umsetzt, dein CSS wie folgt aussehen kann. 

/* Mobile-first queries */
#settings {left: 80%;}

/* Larger than tablet and maximum width of 1200px */
@media screen and (min-width: 780px) and (max-width: 1200px) {
 #settings {left: 50%;}
}

Globale Formatierungen sowie die für Smartphones zu erst ohne Media Querie festgelegt werden. Danach folgen dann aufsteigend die gewünschten Media Queries für unterschiedliche Devices wie Phablet, Tablet und/oder Desktop.

Alles unter und mit maximal 780px Breite zu erst festgelegt wird. Darauf folgt dann der Media Querie für Devices/Viewports die breiter sind als 780px und eine maximale Breite von 1200px haben. Bei CSS man immer an die Kaskade denken sollte. Sprich wie und wann Formatierungen überschrieben werden. 

LG medmonk 

Antwort bewerten Vielen Dank für Deine Bewertung

Hallo

Deine Beschreibung passt nicht zu deinem CSS.

Mit deinem CSS dürfen unter 1200px nur die "50%" aktiv werden und die "80%" gar nicht.

Entscheidend ist die richtige Reihenfolge im Quelltext. Bei max-width (= Ansatz: Desktop First) müssen höhere Werte (hier 1200px) vor niedrigeren (hier 800px) stehen.

Dann würden bis 800px die 80%, zwischen 800px und 1200px die 50% und über 1200px nichts von beiden zutreffen.

Du hast leider nicht geschrieben was du überhaupt erreichen willst.

Gruss

MrMurphy

Antwort bewerten Vielen Dank für Deine Bewertung

Liegt am max-width. Der vorherige Wert wird schlichtweg überschrieben. Benutze min-width. Das Stichwort dabei heißt "mobile first", so solltest du immer deine Webseiten machen.
Der Vorteil bei min-width ist, dass in die richtige Richtung überschrieben wird. Du hast z.B. in min-width: 768px folgendes:

color: red;

Dann benötigt es mindestens 768px oder mehr, damit die Farbe Rot einsetzt. Benutzt du einen zweiten Breakpoint mit min-width 1200px mit der Änderung:

color: green;

So benötigt es mindestens 1200px Breite, damit die Änderung einschlägt. Ist das nicht der Fall und der Bildschirm ist weniger als 1200px breit, so tritt ja der Breakpoint zu vor in Kraft und sollte der auch nicht passen, der Standardwert. Sagen wir mal z.B. color: yellow;

Antwort bewerten Vielen Dank für Deine Bewertung

Was möchtest Du wissen?