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.