Prispôsobme layout šírke prehliadača

Ako pomocou CSS3 reagovať na šírku prehliadača

Pomocou CSS konštrukcie @media si môžeme prispôsobovať štýly rôznym okolnostiam. A medzi nimi je aj šírka zobrazovacej plochy prehliadača.

Takže napríklad ak použijeme vlastnosť padding s hodnotou napr. 100px tak pri užšom zobrazení to nemusí byť vhodné. A tu sa ponúka riešenie.

Takže k pôvodnému nastaveniu:

#container {
    padding: 100px;
}

Môžeme pridať toto:

@media (max-width: 500px) {
    #container {
        padding: 50px;
    }
}

Toto nastavenie nám zmení hodnotu padding na 50px v prípade že šírka zobrazovacej plochy prehliadača bude 500 pixelov alebo menšia. Prehadzuje sa to aj dynamicky.

Samozrejme môžete pridávať aj ďalšie nastavenie @media pre menšie či väčšie veľkosti.

Tiež existujú aj ďalšie možnosti ako napríklad: rozlíšenie, 3d zobrazenie, pomer strán, farebná hĺbka... Celý prehľad nájdete tu: W3C Media Queries

Veľmi efektívne túto vlastnosť CSS využívajú weby Codrops a CSS-Tricks.
Príklad môjho použitia nájdete tu.