media queries staffeln

[Matthias Scharwies]

Servus!

Die Klasse .typoklein befindet sich in allen Media-Queries immer mit unterschiedlichen Schriftgrößen. Leider wird aber immer nur die Schriftgröße z.B. von:

@media (min-width: 320px) and (orientation: Portrait ) {
    .typoklein {
        font-size: 1em;
    }
}

ausgegeben.

Ich rate mal, dass das die letzte ist und da es immer mindestens 320px sind, deshalb alle anderen Festlegungen überschrieben werden.

Im Wiki:

• Responsive Webdesign

• Flexbox-Tutorial

Das untere Tutorial zeigt, wie die media queries von schmalen über mittlere bis zu breiten Viewports angesprochen werden können.

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */  
    .typoklein {
        font-size: 3em;
        color: red;
    }
 
/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 35em) {
    .typoklein {
        font-size: 2em;
        color: blue;
    }
}
 
/* Viewports mit großer Auflösung */
@media all and (min-width: 50em) {
    .typoklein {
        font-size: 1em;
        color: green;
    }
}

Herzliche Grüße

Matthias Scharwies