Úton a reszponzív arculat felé
Ahhoz, hogy az általunk készített weboldalon többféle platform, eszközön is jól használható legyen, törekednünk kell arra, hogy az oldalunk reszponzív legyen.
MegjegyzésA Responsive Web Design (RWD) egy olyan tervezési módszert jelent, amelynek célja, hogy optimális megjelenést biztosítson (egyszerű olvashatóság, könnyű navigálhatóság) a különböző eszközökön (mobil eszközöktől a nagyobb felbontású monitorokig).
Lásd http://en.wikipedia.org/wiki/Responsive_web_design
Viewport megadása
A mobil eszközök böngészőprogramjai az oldalakat virtuális ablakokban jelenítik meg (ezt nevezzük viewportnak), amely általában szélesebb, mint a képernyő, és ezen területen a felhasználók több irányban barangolhatnak, illetve egyes területekre ráközelíthetnek, illetve eltávolodhatnak.
Ha ezen viewport tulajdonságait meg szeretnénk adni a jobb felhasználói élmény biztosításának érdekében, egy <meta> taget kell használnunk, amelyet az oldal <head> részében kell elhelyeznünk. A viewportnak számos tulajdonsága lehet, amelyet vesszővel elválasztva adhatunk meg.
Lássunk egy példakódot:
Forráskód<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Magyarázat
- A width attribútummal adhatjuk meg a viewport szélességét. Ez lehet egy konkrét érték (pl. 500), de van egy speciális érték is (device-width), amellyel az aktuális eszköz kijelzőjének szélességét tudjuk megadni (normál nagyítási szintre vonatkozóan).
- A height paraméterrel a viewport magassága adható meg, illetve itt is használható a device-height érték is.
- Az initial-scale paraméterrel állíthatjuk be azt az alapértelmezett nagyítási szintet, ami az oldal első betöltésekor lesz érvényes.
- A maximum-scale és minimum-scale paraméterrel a maximális és minimális nagyítási szintet állíthatjuk be.
- Az egyes mobil eszközök eltérően viselkednek akkor, ha például álló helyzetből (portrait) fekvő helyzetbe (landscape) állítjuk a böngészőt. Például egy álló helyzetből fekvő helyzetbe váltás eredményezheti azt, hogy a böngésző megváltoztatja a nagyítási szintet, ahelyett, hogy úgy rendezné el az oldalt, mintha eleve fekvő helyzetbe töltődött volna be. Ezen nem kívánatos viselkedés miatt szokták a fejleszők a maximum-scale paramétert 1-re állítani.
- A user-scalable paraméterrel engedélyezhetjük (user-scalable="yes"), illetve letilthatjuk (user-scalable="no"), hogy a felhasználó nagyíthatja-e az alkalmazást vagy sem.
- pl. a Google térkép esetén a user-scalable="no" beállítással találkozunk, mert ott hátrányos lenne, ha a térképre az eszköz nagyítás funkciójával közelítenénk rá, mert akkor a térkép pixelessé válna. Ehelyett maga az alkalmazás biztosítja nekünk a térképre történő kíváló minőségű nagyítást.
Vissza a tartalomjegyzékhez
Media Query használata
Ahhoz, hogy az adott médiához jól illeszkedő stíluslapot készíthessünk, szükségünk lesz arra, hogy az úgynevezett medialekérdezéssel (query) is foglalkozzunk.
Egy médialekérdezés egy média típus megadásból áll valamint nulla vagy több kifejezésből, amelyek lekérdezik az aktuális média egyes tulajdonságait. Egy médialekérdezés igazából egy logikai kifejezésnek tekinthető, ami igaz vagy hamis értékkel tér vissza. A lekérdezés igaz, ha a megadott média típus megegyezik az eszköz média típusával, és az összes kifejezés értéke igaz.
Nézzünk egy példát:
PéldaForráskód<link rel="stylesheet" media="screen and (color)" href="pelda.css">
MagyarázatEzzel a kóddal a pelda.css stíluslapot színes képernyőn való megjelenítéshez linkeltük be. Az and operátorral több feltétel együttes meglétét kezeltük le.
Ugyanezt elérhetjük a @import szabály alkalmazásával is:
Forráskód@import url(color.css) screen and (color);
Ha az összes médiatípusra egyben szeretnénk hivatkozni rövidített módon, akkor használhatjuk az all kifejezést.
PéldaForráskód@media all and (min-width:500px) {
}
@media (min-width:500px) {
}
MagyarázatA fenti kifejezés minden médiatípusra vonatkozik, amennyiben a megjelenítő minimális szélessége 500 képpont. Az all érték viszont elhagyható, erre mutat példát a második sorban található definíció.
Operátorok
A kifejezésekben különböző operátorokat használhatunk, ilyen a már példában szerepelt and (és) is. Most nézzük ezeket összegyűjtve:
- and
- logikai ÉS operátor
- Példa: <link rel="stylesheet" media="speech and (min-device-width: 800px)" href="pelda.css">
- not
- logikai NEM operátor
- A média lekérdezés elején szerepelhet, és negálja a logikai értéket.
- pl. <link rel="stylesheet" media="not screen and (color)" href="pelda.css">
- only
- Arra használhatjuk, hogy a stíluslapot elrejtsük a régebbi böngészőprogramok elöl, mert azok rosszul értékelnék ki a kifejezést.
- pl. <link rel="stylesheet" media="only projection and (color)" href="pelda.css">
- Ha a fenti példából elhagynánk az only kifejezést, akkor a régebbi böngésző a projection médiára állítaná be a stíluslapot, és figyelmen kívül hagyná az and (color) kifejezést. Ezért kellett bevezetni az only operátort, hogy ezt a hibát ki lehessen küszöbölni.
- Természetesen VAGY kapcsolatot is megadhatunk, erre viszont a vessző szolgál, nem pedig a máshol megszokott or operátor.
- pl. @media screen and (color), projection and (color) {
}
Vissza a tartalomjegyzékhez
Média tulajdonságok
Most nézzük azon tulajdonságokat (pontosabban a leggyakrabban használtakat), amelyek használhatunk a kifejezésekben. Láthatjuk, hogy sok tulajdonságnál megadható a minimális és maximális érték is, ezeket nem tüntetjük fel külön, helyette azt szerepeltetjük, hogy használható-e a min illetve max előtag.
- width: szélesség. Folytonos média esetén a viewport szélességét jelenti a gördítősávot (ha van) is beleértve. Lapozható média esetén ez az oldal doboz szélességét jelenti.
- Értéke: hosszúság érték (pl. 300 px)
- Használható a min/max előtag: igen
- Példa: <link rel="stylesheet" media="print and (min-width: 25cm)" href="nyomt.css>
- height: magasság. Folytonos média esetén a viewport magasságát jelenti a gördítősávot (ha van) is beleértve. Lapozható média esetén ez az oldal doboz magasságát jelenti.
- Értéke: hosszúság érték (pl. 300 px)
- Használható a min/max előtag: igen
- Példa: <link rel="stylesheet" media="print and (min-height: 30cm)" href="nyomt.css">
- device-width: Folyamatos média esetén a képernyő szélességét jelenti, lapozható média esetén az oldallap szélességét.
- Értéke: hosszúság érték (pl. 300 px)
- Használható a min/max előtag: igen
- Példa: <link rel="stylesheet" media="screen and (device-width: 600px)" href="pelda.css">
- device-height: Folyamatos média esetén a képernyő magasságát jelenti, lapozható média esetén az oldallap magasságát.
- Értéke: hosszúság érték (pl. 300px)
- Használható a min/max előtag: igen
- Példa: <link rel="stylesheet" media="screen and (device-height: 400px)" href="pelda.css">
- orientation: álló vagy fekvő elrendezést jelent. Akkor álló (portrait) az elrendezés, ha a magasság nagyobb vagy egyenlő a szélességgel. Ellenkező esetben landscape (fekvő).
- Értéke: portrait | landscape
- Használható a min/max előtag: nem
- Példa: <link rel="stylesheet" media="screen and (device-width: 600px)" href="pelda.css">
- aspect-ratio: méretarány. A szélesség osztva a magassággal.
- Értéke: tört (pl. 16/9)
- Használható a min/max előtag: igen
- Példa: <link rel="stylesheet" media="screen and (aspect-ratio: 4/3)" href="pelda.css">
- device-aspect-ratio: méretarány. A device-width szélesség osztva a device-height magassággal.
- Értéke: tört (pl. 16/9)
- Használható a min/max előtag: igen
- Példa: <link rel="stylesheet" media="screen and (device-aspect-ratio: 16/9)" href="pelda.css">
- color: színmélység. A megjelenítő eszköz színmélységére jellemző szám (bitek száma színkomponensenként). Nulla esetén a kijelző nem színes.
- Értéke: egész szám
- Használható a min/max előtag: igen
- Példa: <link rel="stylesheet" media="screen and (min-color: 1)" href="pelda.css">
- resolution: A megjelenítő eszköz felbontása.
- Értéke: felbontás (pl. 100dpi)
- Használható a min/max előtag: igen
- Példa: <link rel="stylesheet" media="screen and (min-resolution: 300dpi)" href="pelda.css">
Vissza a tartalomjegyzékhez
