Reszponzivitás media query-vel. Így csináld

A weboldalak reszponzivitását általában CSS-sel és azon melül media query utasításokkal oldjuk meg. Ennek lényege, hogy olyan CSS utasításokat gyűjtünk alatta, amik csak bizonyos képernyő szélesség (pontosabban: böngésző-ablak szélesség) esetén fognak érvényesülni. Ha olyan széles ablakban nézzük a weboldalt, amire a media query nem vonatkozik, akkor az ott lévő CSS utasítások olyanok, mintha ott sem lennének.

Így néz ki a media query

Példa egy media queryre:

@media screen and (max-width: 600px)

{

.kepek {flex-direction: column;}

.infobox {margin: 5px; padding: 5px;}

H2 {font-size: 24px;}

}

Ebben az esetben a középen lévő, két kapcsos zárójel közötti, csak példaként beírt CSS utasítások csak akkor futnak le, ha 600 pixeles, vagy annál kisebb képernyőn nézzük a weboldalt.

 Az első sor elején a @media jelenti, hogy ez egy media query lesz. A screen jelentése, hogy képernyőre vonatkoztatva szeretnénk CSS változtatásokat megadni. Lehet ugyanis print is itt, amivel azt adhatjuk meg, hogy ha valaki kinyomtatná a weboldalt, akkor hogy jelenjen meg a webolalunk a papíron. Ezt azonban kevés weboldal használja. Utána egy sima zárójelben adjuk meg a képernyő szélességet pixelben, és hogy az maximum vagy minum érték. (mivel a screen és a szélesség megadása egyaránt a feltétele annak, hogy a mediaquery lefusson, kerül közéjük egy and is.) A biztonság kedvéért tisztázzuk:

A max-width: 600px azt jelenti, hogy 600 pixel alatt, 600pixelig érvényesül

A min-width: 600px azt jelenti, 600 pixelen és afölött érvényesül

Melyiket használjuk a kettő közül? Ez csak rajtunk múlik. A hagyományos felfogás szerint először elkészítjük a weboldalt, az összes CSS-sel desktop nézetre optimalizálva, mondjuk 1920-as pixelszélességet feltételezve. Ezt követően media query-ket teszünk a CSS fileba amik felülírják a CSS-t, ha a megadott szélesség alatt nézi valaki a weboldalt. Ilyenkor a max-width-et használjuk, ahogy megyünk lefelé a képernyőszélességben.

A mobile first felfogás szerint pedig eleve mobiltelefonra szerkesztjük meg a weboldalt. Miután ez kész, media queryvel felülírjuk, ha valaki az okostelefonénál szélesebb képernyőn nézi a weblapot. Ilyenkor a min-width-et használjuk, ahogy haladunk felfelé a képernyő szélességben.

Mindegy, melyik módszert használjuk, nem jobb az egyik, mint a másik. Ami közös mindkettőben, hogy több media query-t is használhatunk egymás után különböző szélességekre, és szoktak is többet megadni a webfejlesztők, akik töréspont-ként hivatkoznak media queryben megadott szélességekre.

Amire figyelni kell

A media query igazán egyszerű. Csak három apróságra kell figyelni, ezekre:

1. Ha több media query-t használunk, akkor egy konkrét képernyő szélességre több is érvényesülhet egyszerre. Ha pl. 400 pixel keskenyen nézem az oldalt, arra nem csak a legalacsonyabb szélességnél, mondjuk 600 pixelnél beállított media query fog vonatkozni, hanem a korább, pl. a max-width:1000px is. (Ha ellentmondás van, akkor a CSS fileban lejjebb levő felülírja a korábbit)
    
2. Mivel a mediaquery lényege, hogy felülírja az alap CSS-ünket, ezért a CSS file végén kell elhelyezni.
    
3. Minden mediaquery végén két kapcsos zárójel van. Az egyik magát a mediaquery-t zárja le, a másik pedig azon belül az utolsó CSS utasítást. Ajánlott a mediaquery-t lezáró kapcsos zárójelet külön sorba tenni.

Ha még egyáltalán nem ismered a CSS kódokat, akkor még az egész előtt nézd meg, mik a legnépszerűbb CSS kódok. Ha kiváncsi vagy, hogy ugyanezt hogy tanuljuk meg a Prooktatás alap tanfolyamán, nézd meg ebben a videóban példákkal. Ha pedig már ismered a CSS-t és most tennéd reszponzívvá a weboldalat, akkor ezeket javaslatokat érdemes megfontolni.

Jó szórakozást!