15. dia RESZPONZÍV WEBDIZÁJN Flashcards
Mi a reszponzív webdizájn?
Egy olyan webfejlesztési megközelítés, amely weblapok készítésénél optimális megjelenést és viselkedést biztosít, a megjelenítő eszköztől, tájolástól és mérettől függetlenül. Dinamikusan alkalmazkodnia kell az eszközhöz.
(Weboldal elrendezések) statikus/rögzített, folyékony, adaptív, reszponzív
Statikus/rögzített :
Abszolút mértékegységekben kifejezett rögzített szélességet használó elrendezés.
Folyékony :
Relatív mértékegységben kifejezett szélességet használó elrendezés.
Adaptív :
Statikus elrendezések listája amelyből médialekérdezés során kiválaszt egyet a nézetablak szélességéhez mérten.
Reszponzív :
Folyékony elrendezések listája amelyből egyet kiválaszt a nézetabllak szélességéhez mérten.
Referencia pixel, CSS pixelek és fizikai pixelek
A fizikai és a CSS pixelek különbözőek, a fizikai pixel egy hardveres fogalom, hogy hány pixelpontból áll az eszközünk kijelzője.
A mai nagyfelbontású eszközök esetében egy CSS-ben megadott 12 pixeles betűméret olvashatatlan lenne.
Referencia pixel:
Az a látószög, amely alatt egy pixel látszik egy 96 dpi pixelsűrűségű eszközön kartávolságról nézve.
1 px ~ 0,26 mm
CSS abszolút hosszúság mértékegységei
Abszolút mértékegység, fix érték, nem függ más elemek méretétől vagy a nézőtértől.
cm - 1cm = 96px/2,54
mm - 1mm = 1cm/10
Q - 1Q = 1cm/40
in - 1in = 2,54 = 96px
pc - 1pc = 1in/6
pt - 1pt = 1in/72
px - 1px = 1in/96
CSS relatív hosszúság mértékegységei
Relatív mértékegységek más elemek vagy a nézőtér méretétől függnek.
em - a font-size tulajdonság elemhez tartozó számított értékét jelenti
ex - az elemhez tartozó betűkészlet x-height értékét jelenti
rem - az em egység a gyökérelemhez tartozó számított értékét jelenti
A nézetablak mértékegységek is idetartoznak.
CSS nézetabla mértékegységek
A nézetablakhoz viszonyított mértékegységek. Folytonos médiákhoz a felhasználói ágens általában egy nézetablakot nyújt, amelyen keresztül a felhasználó nézheti a dokumentumot.
vw - nézetablak szélességének 1%-a
vh - nézetablak magasságának 1%-a
vmin/vmax - vw és vh közül kisebb/nagyobb
(Média lekérdezések) Mi az?
A dokumentumok megfelelő megjelenítése érdekében a felhasználói ágens vagy eszköz bizonyos jellemzőinek vizsgálatát jelenti.
Stíluslapok feltételes alkalmazására szolgálnak.
Általában függetlenek a megjelenített dokumentumtól.
(Média lekérdezés) CSS-ben
@import:
Opcionális média lekérdezés lista a feltételeket fejezi ki, amelyek teljesülése esetén alkalmazható az @import.
@media:
Olyan csoportszabály amelynek feltétele egy média lekérdezés. CSS szabályokhoz társítanak feltételes szabályokat.
(Média lekérdezés) HTML-ben
Valójában CSS-ben arra való, hogy a stílust különböző eszközökre és kijelzőkre szabjuk.
(Média lekérdezés) szintaxis
Egy opcionális módosítóból, opcionális média típusból és egy média feltételből áll. Több összefűzésére is van lehetőség vesszők segítségével.
(Média lekérdezés) Kiértékelés
Logikai kifejezés, amely igaz vagy hamis.
Akkor igaz, ha meg van adva a média típus és az illeszkedik annak az eszköznek a médiatípusával amelyen a felhasználói ágens fut. Ha lista, akkor igaz ha legalább egy közülük igaz.
A felhasználói környezetben történt változások esetén újra ki kell értékelni a felhasználói ágensnek a média lekérdezést, feltéve ha a felhasználói ágens tud a változásról. Ezzel biztosítható, hogy a viselkedés és funkcionalitás nem változik. (Pl.: tájolás változás)
(Média lekérdezés) Média típusok
Felhasználói ágens eszközök egy széles csoportja, amelyeken megjeleníthető egy dokumentum. Nem összetévesztendő az IANA média típussal, mint a text/html.
all - az összes eszközre illeszkedik.
print - a nyomtató eszközökre illeszkedik, illetve a nyomtatott megjelenítés visszaadása, mint egy dokumentum nyomtatási képe a böngészőben.
screen - a ‘print’-re nem illeszkedő összes eszközre illeszkedik.
(tty, tv, projection, handheld, braille, embossed, aural, speech) - elavultak, tilos a használatuk
(Média lekérdezés) Média jellemzők
Egy, a média típusoknál finomabb teszt, amely a felhasználói ágens vagy megjelenítő eszköz egy bizonyos jellemzőjét vizsgálja.
Pl.:
width - aktuális nézetablak szélesség
height - aktuális nézetablak magasság
orientation - lehet portrait vagy landscape, horizontális vagy vertikális
(Média lekérdezés) Miédia jellemzők kombinálása
Több média jellemző egy feltétellé kombinálható (not/or/and)
- Bármelyik negálható ha elé ‘not’ kerül. (not (color))
- Összefüzhetőek and/or segítségével.
- Kiértékelésének precedenciáját meg lehet adni zárójelekkel.
- Nem megengedett az and/or keverése ugyan azon a szinten.
(Média lekérdezés) Min- Max- előtagok
Egy tartomány típusú média jellemzőt le lehet írni a min- max- előtaggal.
(min-height: 600px) == (height >= 600px)
Max a fordítottja.
Diszkrét média jellemzőkhöz nem adhatók meg.
