Mobile-up aðferðin
Algengasta aðferðin við að skipuleggja svegjanlegar vefsíður er að byrja á minnstu stærðinni og skipuleggja alla grunnþætti vefsíðunnar. Tökum dæmi um hvernig við viljum að vefsíðan birtist í farsímum 0 - 37.5em (0 - 600px)
| header |
| nav |
| (main) article |
| (main) aside |
| footer |
Einföld uppsetning þar sem allir dálkar birtast lóðrétt hver á eftir öðrum.
Til að hafa stjórn á því hvernig dálkar raða sér á síðu sem eru í stærri skjá en 37.5em, getum við notað CSS skipunina @media til að setja inn skilyrði um uppröðun þeirra. Vafrinn les í stílsíðuna hvernig skipulag vefsins á að vera og tekur mið af skjástærð vafrans.
| header | |
| nav | |
| (main) article | aside |
| footer |
Hér eru dálkar í main raðað hlið við hlið.
Skipunin @media screen and (min-width: 37.5em) þýðir að allir skjáir sem eru með meiri breidd en 37.5em geta tekið við eftirfarandi skipunum sem eru hreiðraðar í slaufusviga {…}
Glósur
Hér er dæmigerð html vefsíða með marktækum (Semantic) tögum
Hér er dæmi um @media skipanir sem yfirrita fyrra skipulag.