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.
A látható és az elrendezési nézetablak
A mobileszközök keskeny képernyője miatt a nézetablaknak gondot jelent az asztali böngészőkre készített dokumentumok megjelenítése.
Megoldás:
Látható nézetablak :
Az oldal a kijelzőn látható része
Elrendezési nézetablak :
A nézetablak, amelyben a böngésző kirajzol egy oldalt. Ez lehet nagyobb mint a látható rész. Média lekérdezések esetében ez lesz figyelembe véve.
Viewport meta címke
Lehetővé teszi, hogy az elrendezési nézetablak méretét és kezdetleges nagyítási arányát közvetlen megadhassák a szerzők.
Mobile-first és desktop-first dizájn
A megközelítések közötti különbség az, hogy melyikre optimalizált a dokumentum megjelenítése.
Mobile-first esetén kisebb kijelzőkre optimalizálunk, ekkor érdemes azt vizsgálni, hogy a kijelző minimum mérete mekkora. Ha az nagy, akkor nagyobb a kijelző és esetleg desktop változat kell.
Desktop-first esetében pedig a max-width használata célszerű, ha annál kisebb akkor lehet, hogy a felhasználói ágans telefonról fut.
(Folyékony rácsok) felxbox elrendezés
Felhasználói felületek tervezéséhez optimalizált CSS dobozmodell. Egy flex konténer gyermekei bármilyen irányban elrendezhetők és rugalmasan változhatnak méretben. A gyermekek vízszintes és függőleges igazítása könnyen kezelhető.
(Folyékony rácsok) Rács elrendezés
Felhasználői felület tervezéséhez optimalizált kétdimenziós rács-alapú elrendezési rendszert határoz meg. Egy rácskonténer gyermekei tetszőleges rekeszekbe helyezhetőek egy előre definiált rugalmas vagy rögzített méretű elrendezési rácson. Vezéreltebb méretet és elrendezést biztosít.
Bootstrap CSS karakterrendszer főbb jellemzői
Összes főbb mobil és asztali böngésző valamint platform legújabb stabil kiadását támogatja. Mobile-first megközelítést követ, ezért a viewport < meta > címke megadása kötelező a < head > elemhez. Sass-ben írták és a Dart Sass szükséges hozzá, hogy a .scss forrásállományt .css állománnyokká fordításához. Box-sizing tulajdonságot mindenhol ‘border-box’-ra alakítja. Flexbox elrendezést használ.
