Az előző bejegyzésben létrehoztunk egy egyszerű reszponzív grid rendszert, amelynek melynek segítségével könnyen lehet az oldal tartalmát elrendezni. A mintapélda jól nézett ki desktop méretű kijelzőn, mobilon kevésbé.
Media Query
A media query-ket (média lekérdezés) CSS3-ban vezették be. A media query egy szabály, melynek segítségével feltételhez tudjuk kötni egy CSS tulajdonság alkalmazását. Tulajdonképpen a programnyelvek feltételes (IF) utasításához hasonlatosak.
Példa:
Ha a megjelenítő média képernyő és a felbontás kisebb mint 500px, akkor a háttérszín legyen világoskék.
@media screen and (max-width: 500px) { body { background-color: lightblue; } }
Az előző mintapéldánk két oszlopos elrendezése alacsony felbontáson már nem jól nézett ki, mert kevés hely jutott az oldalsó sávnak.
Alkalmazzunk egy media query-t annak érdekében, hogy egy bizonyos értéknél alacsonyabb felbontáson minden oszlop szélessége 100%-os legyen, kitöltve a kijelző teljes szélességét:
... /* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} @media only screen and (max-width: 768px) { /* For mobile phones: */ [class*="col-"] { width: 100%; } } ...
Így módosítva a .css állományunkat 768px-nél alacsonyabb felbontású kijelzőn az oszlopok szélessége 100% lesz.
A jelenlegi állapot megtekinthető: itt.
Mobile First Design
Ma már digitális médiákkal töltött idő jelentős része mobil eszközökre esik, ami azt jelenti, hogy nemhogy nem lehet kihagyni őket a tervezésből, de egyenesen a mobil eszközöket kell elsődlegesen szem előtt tartani. Ez az ún. Mobile First Design.
Ez a gyakorlatban azt jelenti, hogy az oldalt elsődlegesen mobil eszközökre tervezzük, majd pl. a media query-k segítségével megoldjuk, hogy asztali gépeken is jó legyen.
Jelen esetben, tegyük alapértelmezetté, hogy az oszlopok 100% szélesek, és media query-k segítségével oldjuk meg, hogy bizonyos felbontás felett működjön csak a 12 oszlopból álló rácsszerkezet (megcseréljük a két beállítást):
/* Mobile Devices First: */ [class*="col-"] { width: 100%; } /* For desktops: */ @media screen and (min-width: 768px) { .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} }
A jelenlegi állapot megtekinthető: itt.
Device Pixel Ratio
A HD felbontás (1280 x 720) már általános középkategóriás telefonokon, komolyabbakon pedig a FullHD (1920 x 1080) ill. a QuadHD (2560 x 1440) sem ritka. Ezek a felbontások jóval nagyobbak, mint a media query-ben megadott 768px, mégis egy oszlopos elrendezésben jelenik meg az oldal egy ilyen felbontású és normál (5″ – 5.5″) méretű mobil eszközön is.
Ennek oka az eszköz relatíve kis méretéhez viszonyított (túl) nagy felbontásában és a device pixel ratio-nak (dpr) nevezett tulajdonságban keresendő. A dpr a fizikai és a logikai felbontás közötti arányt fejezi ki, ami ezeknél az eszközöknél, általában 2 szokott lenni. Ez azt jelenti, hogy a böngésző a média lekérdezés eredményeként a fizikai felbontás / dpr = logikai felbontást kapja meg (pl. HD (1280×720) / 2 = 640 x 360, ezért egy oszlopos lesz a megjelenítés). A dpr értéke megtudható pl. a mydevice.io oldal meglátogatásával.
További töréspontok hozzáadása
Töréspontnak nevezzük azt a felbontást, ahol a media query-k alkalmazása révén megváltozik az oldal elrendezése. A media query-kkel tetszőleges számú töréspontot hozhatunk létre, de nem célszerű túl sokat, csak a tipikus eszközméretekhez illeszkedőeket.
A BootStrap keretrendszer töréspontjai:
- extra small devices (768px alatt)
- small devices (768 és 992 pixel között)
- medium devices (992 és 1200 pixel között)
- large devices (1200 pixel felett)
Hozzunk létre egy új töréspontot 992 pixelnél, illetve állítsuk be az egyes felbontásokhoz tartozó maximális container méreteket:
/* Mobile Devices First: */ [class*="col-"] { width: 100%; } .container { margin: 10px auto; } /* Medium devices */ @media screen and (min-width: 768px) { .col-md-1 {width: 8.33%;} .col-md-2 {width: 16.66%;} .col-md-3 {width: 25%;} .col-md-4 {width: 33.33%;} .col-md-5 {width: 41.66%;} .col-md-6 {width: 50%;} .col-md-7 {width: 58.33%;} .col-md-8 {width: 66.66%;} .col-md-9 {width: 75%;} .col-md-10 {width: 83.33%;} .col-md-11 {width: 91.66%;} .col-md-12 {width: 100%;} .container { width: 95%; max-width: 800px; } } /* Large devices */ @media screen and (min-width: 992px) { .col-lg-1 {width: 8.33%;} .col-lg-2 {width: 16.66%;} .col-lg-3 {width: 25%;} .col-lg-4 {width: 33.33%;} .col-lg-5 {width: 41.66%;} .col-lg-6 {width: 50%;} .col-lg-7 {width: 58.33%;} .col-lg-8 {width: 66.66%;} .col-lg-9 {width: 75%;} .col-lg-10 {width: 83.33%;} .col-lg-11 {width: 91.66%;} .col-lg-12 {width: 100%;} .container { width: 95%; max-width: 1200px; } }
Ezzel a következő nézetek jöttek létre:
- small devices: 768px alatt, container méret: 100%
- medium devices: min. 768px felbontás, container méret: max. 800px
- large devices: min. 992px felbontás, container méret: max. 1200px
Az egyes töréspontok illetve a maximális container méretek igény szerint módosíthatóak.
A kész állapot megtekinthető: itt.