hello
nyilakkal tudsz navigálni
Különböző méretű device-ok
Netbooktól a 2000px-en túli felbontásokig
Touch device-ok: tabletek, okostelefonok
Fluid + fix elemek
Teljes oldal helyett egységek tervezése
Egységekből layoutok felépítése
Stephen Hay: reference wireframing
http://www.slideshare.net/stephenhay/mobilism2011
Breakpointok:
· 320 (okostelefon)
· 768 (tablet)
· 1024 (netbook)
· 1600 (desktop)
Grid rendszerek
Operátorok:
· , [or]
· and
· not (teljes query-t negálja)
· only (az egészre vonatkozik)
Változók:
· méretek (max-width, max-height, stb.)
· orientáció (portrait, landscape)
elemek átméretezése
betűméretek, eltartások módosítása
layout átrendezése
tartalmi egységek elrejtése / megjelenítése
demo1: box-flex, demo2: box-pax és box-align
box-flex: megmaradó területek elosztása arányok alapján
box-orient: vízszintes / függőleges
box-direction: normal / reverse
box-pax és box-align: középre rendezés
media querykkel: a responsive fluid layout
csak prefixekkel működik
flex-order: sorrend változtatása (?)
adaptive sizing
TinySrc (Sencha)
http://i.tinysrc.mobi/http://mysite.com/myimage.png
http://i.tinysrc.mobi/-8/http://mysite.com/myimage.png
http://i.tinysrc.mobi/x50/http://mysite.com/myimage.png
@2x (Retina Display)