Zmena layoutu pri rôznej veľkosti viewportu
Filův blog našiel zaujímavý nápad pre postavenie layoutu stránky meniaceho usporiadenie stránky v závislosti na šírke okna prehliadača (často nesprávne stotožnovanej s rozlíšením desktopu).
O čo tam ide? Samotný nápad je zaujímavý pre isté usporiadanie stránok. Ako uvádza príklad, tri boxy vedľa seba sa pri menšej šírke okna môžu neúmerne stlačiť. Preto sa používajú techniky ako float: left | right
, ktoré ale spôsobujú plávanie boxov vedľa seba a v súčinnosti s min-width
a width
môžu byť usporiadané vedľa seba alebo pri nedostatku miesta pod sebou.
Príklad ale mení vzhľad boxov podľa toho, či sú vedľa seba alebo pod sebou. Na to je samozrejme použitý javascript resolution.js a init.js. Výkonná časť je v prvom skripte a je pomerne triviálna – po zistení šírky okna prehliadača je púhe rozhodovanie limitnej veľkosti šírky pri ktorej sa určeným prvkom zmení vzhľad z predpripraveného predpisu CSS.
Pokiaľ môžem posúdiť, tak riešenie neobmedzuje ani v prípade, že javascript zapnutý nie je ale neviem odhadnúť správanie skriptu v prípade neúplného podporovania javascriptu. Pre konkrétnu aplikáciu je však nutné uvažovať aj s veľkosťou písma, a teraz zdôrazňujem, vzhľadom na rozlíšenie obrazoviek, fyzické rozmery obrazovky (teda nie aktuálna veľkosť viewportu).
Celkovo je riešenie neuniverzálne ale podporuje argumenty súvisejúce s vhodnosťou pružného layoutu stránky pre súčasný webdesign. Už len samotný príklad je skvelým príkladom riešenia.