Responsive Webdesign4. sre ad(a-it:58x / Mbl *
cen n mxwdh 6p) * oie /
sre ad(a-it:78x / Tbe Prri *
cen n mxwdh 6p) * alt otat /
sre ad(a-it:12p)/ Tbe Lnsae*
cen n mxwdh 04x * alt adcp /
sre ad(i-it:12p)/ Dstp*
cen n mnwdh 04x * eko /
5. Verwendung in SASS
$oie
mbl:
"mxwdh 58x6p);
(a-it: 6p58x"
$otat "mxwdh 78x"
prri: (a-it: 6p);
$adcp:"mxwdh 12p);
lnsae (a-it: 04x"
$eko: "mnwdh 12p);
dstp
(i-it: 04x"
.oe{
hm
#edr{
hae
bre-otm 0
odrbto: ;
}
@ei #$otat {
mda {prri}
#edr{
hae
mri-o:1m
agntp e;
}
}
}
7. Verwendung in
JavaScript
fnto dfnVepr({
ucin eieiwot)
vrwdh=$wno)wdh)
a it
(idw.it(;
sic (re {
wth tu)
cs (it < 58:
ae wdh = 6)
vepr ="oie;bek
iwot
mbl" ra;
cs (it < 78:
ae wdh = 6)
vepr ="otat;bek
iwot
prri" ra;
cs (it < 12)
ae wdh = 04:
vepr ="adcp" bek
iwot
lnsae; ra;
dfut
eal:
vepr ="eko" bek
iwot
dstp; ra;
}
}
12. In Viewport – The Magic
/ Cek frvepr css-SrnsadAry (eal =ary *
* hcs o iwot ae
tig n ras dfut
ra) /
fnto iVepr(iwot)
ucin niwotveprs{
i(yefveprs= 'tig)
ftpo iwot = srn'{
veprs=nwAryveprs;
iwot
e ra(iwot)
}
rtr !(.nra(iwot veprs >-)
eun !$iAryvepr, iwot)
1;
}
19. JavaScript
/ mbl frtiae *
* oie is mgs /
fnto rsosvIg){
ucin epniem(
vriae=$'m[aadstp';
a mg
(igdt-eko])
i(niwot"oie,"otat){
fiVepr(mbl" prri")
iaeec(ucin( {
mg.ahfnto )
$ti)at(sc,$ti)dt(mbl')
(hs.tr'r' (hs.aa'oie);
};
)
}es i (niwot"adcp" "eko")
le f iVepr(lnsae, dstp){
iaeec(ucin( {
mg.ahfnto )
$ti)at(sc,$ti)dt(dstp);
(hs.tr'r' (hs.aa'eko')
};
)
}
}
24. jQuery UI Navigation
SlideDown anstatt Fade ✓
Mouseover-Events ✓
Scroll-Events / Overflow: hidden ✓
Besonders auf dem Blackberry und Windows Phone
traten Probleme mit Toch-Events auf ✓
26. Vielen Dank für Eure
Aufmerksamkeit
o/
© 2014 Antonia Ilski, Niklas Köhler