Responsive Web Design (RWD) 2.

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.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.