Reszponzív webdizájn Flashcards
Mi a reszponzív webdizájn?
A reszponzív webdizájn (RWD) egy webfejlesztési megközelítés olyan weblapok készítéséhez, melyek optimálisan néznek ki és viselkednek egy egész sor eszközön, a mobiltelefonoktól kezdve az asztali monitorokig, függetlenül attól, hogy mi az ablak-/képernyőméret vagy a tájolás.
Weboldal elrendezések
- Statikus/rögzített: abszolút mértékegységben (többnyire pixelben)
kifejezett rögzített szélességet használó elrendezés. - Folyékony (fluid/liquid): relatív mértékegységben kifejezett szélességet használó elrendezés.
- Adaptív: statikus elrendezések egy sorozatként tekinthető.
- Média lekérdezések révén különböző statikus elrendezéseket határoz meg különböző nézetablak szélességekhez.
- Reszponzív: folyékony elrendezések egy sorozatként tekinthető. Média lekérdezések révén különböző folyékony elrendezéseket határoz
meg különböző nézetablak szélességekhez.
Referencia pixel
A referencia pixel az a látószög, mely alatt egy pixel látszik egy 96dpi pixelsűrűségű eszközön egy kar távolságról nézve.
CSS pixelek
1in/96
fizikai pixelek
DPI (dots per inch), DPCM (dots per centimeter), PPI (pixels per
inch), PPCM (pixels per centimeter):
- A nyomtatók/kijelzők pont-/pixelsűrűségét (felbontását) mérik
A CSS abszolút hosszúság mértékegységei, nézetablak
mértékegységek
- cm centiméter 1cm = 96px/2,54
- mm milliméter 1mm = 1cm/10
- Q negyvened 1Q = 1cm/40 milliméter
- in inch 1in = 2,54cm = 96px
- pc pica 1pc = 1in/6
- pt pont 1pt = 1in/72
- px pixel 1px = 1in/96
relatív hosszúság mértékegységei, nézetablak mértékegységek
- em: a font-size tulajdonság az elemhez tartozó számított értékét jelenti.
- rem: az em egység a gyökérelemhez tartozó számított értékét jelenti.
- vw, vh, vmin, vmax
Média lekérdezések
Egy média lekérdezés egy módszer a felhasználói ágens vagy eszköz bizonyos jellemzőinek vizsgálatára, melyen a dokumentum megjelenítésre kerül.
média lekérdezések CSS-ben
@import
- Ha a média lekérdezés nem illeszkedik, akkor az importált stíluslap szabályai nem lesznek alkalmazva, pontosan úgy, mintha a stíluslap az adott média lekérdezést tartalmazó @media blokkba lenne csomagolva.
- opcionalis lekerdezes lista, amely a felteteleket fejezi ki, melyek teljesulese eseten alkalmazhato az import
- A @media szabály egy olyan feltételes csoportszabály, melynek feltétele egy média lekérdezés.
media lekerdezes html-ben
Vonatkozó specifikáció: HTML Living Standard
Lásd a media attribútumot, mely a következő elemeken adható meg:
- link
- meta
- source
- style
Példa:
< link rel=”stylesheet” media=”screen” href=”screen.css” >
Média lekérdezések kiértékelés
- Egy média lekérdezés egy logikai kifejezés, mely igaz vagy hamis. Egy média lekérdezés igaz, ha teljesülnek az alábbiak:
- Ha meg van adva a média típus, akkor az illeszkedik annak az eszköznek a média típusára, ahol a felhasználói ágens fut.
- A média feltétel igaz.
- Egy média lekérdezés lista igaz, ha valamely komponens média lekérdezése igaz, és csak akkor hamis, ha minden komponens média lekérdezése hamis (logikai vagy kapcsolat).
- ujra kell ertekelni, ha pl elforgatjak a kepernyot
média típusok
- Egy média típus felhasználói ágens eszközök egy széles csoportja,
melyeken megjeleníthető egy dokumentum. - Nem összetévesztendők az IANA média típusokkal, mint például text/html!
- all: az összes eszközre illeszkedik.
- print: a nyomtató eszközökre illeszkedik és az olyan eszközökre,
melyek célja egy nyomtatott megjelenítés visszaadása, mint például egy dokumentum nyomtatási képét mutató böngésző (print preview). - screen: a print-re vagy speech-re nem illeszkedő összes eszközre
illeszkedik. - speech: a képernyőolvasókra és hasonló eszközökre illeszkedik,
melyek hangosan olvasnak fel egy oldalt.
média jellemzők
- Egy média jellemző (media feature) egy, a média típusoknál finomabb
teszt, mely a felhasználó ágens vagy megjelenítő eszköz egy bizonyos jellemzőjét vizsgálja. - a lekerdezeseket mindig zarojelek koze kell tenni
- csak a jellemzo neve egy logikai ertek
- egyetlen erteket fogadnak el
- min-height == height >=
- max-height == height <=
média jellemzők kombinálása (not, and, or)
- Több média jellemező egy média feltétellé kombinálható össze a
not/and/or logikai műveletekkel. - Bármely média jellemző negálható elé not helyezésével, mint például not (color).
- Két vagy több média jellemző összefűzhető közéjük and/or helyezésével.
- Példa: (width < 600px) and (height < 600px), update: slow) or (hover: none)
- Média feltételek csoportosíthatók zárójelek közé zárással, mint például
not ((color) or (hover)).
A látható és az elrendezési nézetablak
- mobilon keskenyebb a nezetablak, vagy nagyobb a dpi, ami gondot jelent a gepre irt dokumentumoknal
- mobilon ketfajta nezetablak van
- Látható nézetablak (visual viewport): az oldal a kijelzőn látható
része. - Elrendezési nézetablak (layout viewport): a nézetablak, melybe a
böngésző kirajzol egy oldalt.
- Látható nézetablak (visual viewport): az oldal a kijelzőn látható
