@media s podmínkami na šířku

Zužujte a roztahujte si okno prohlížeče. Podpora všude kromě IE 8 a starších.

Minimální šířka prohlížeče min-width

Tento prvek změní pozadí na žluté, pokud šířka okna dosahuje minimálně 600 pixelů. Pokud je šířka okna menší než 600px, pravidlo se stylem se nepoužije. Zápis je:

@media (min-width:600px) {
#prvek {background-color: yellow;}
}

Maximální šířka prohlížeče max-width

Pozadí bude růžovoučké, pokud bude maximální šířka okna pouze 800 pixelů, ne víc. Pak se pravidlo uplatní. Pokud bude šířka okna větší než 800 pixelů, media dotaz neplatí a pravidlo se neuplatní. Zápis vypadá takto:

@media (max-width:800px) {
#dvojka {background-color: #ffcccc;}
}