Ígértem, hogy fogok írni erről is, és ennek most el is jött az ideje. No de ahhoz, hogy belevágjunk, nem árt tisztában lenni azzal, hogy miről is lesz szó. Hiszen nem mindenkinek egyértelmű az, hogy mit jelent a reszponzív - illetve szerintem a többségnek ez talán új fogalom.

A reszponzivitás annyit jelent, hogy több felbontást is támogat egy weboldal egyszerre. Talán emlékeztek rá, hogy volt egy időszak, amikor divat volt kiírni, hogy "Ajánlott felbontás: X*Y" (vicces, nem igaz? - nehogy már a szerkesztő várja el, hogy mekkora felbontásban nézzük az adott oldalt). Persze minden weboldalt meg lehet nézni mobilon is, nem is emiatt lett fontos, hanem, hogy sokszor kisebb felbontásban széthullik az egész, vagy egyszerűen csak nem túl kényelmes olvasni. Kis betűk, nagyítgatás, oldalra görgetés.. ez nem túl kellemes, a nagy képekről nem is beszélve, ami mobilneten lehet, hogy 10x olyan lassan tölt be, mint a PC-n szélessávú nettel.

Lehet erre azt mondani, hogy felesleges, úgysem nézi senki az oldalt mobiltelefonról, de tényleg így van ez? Egyáltalán nem, és aki nem maga miatt szerkeszt weboldalt, hanem egy kicsit is odafigyel a látogatóira, annak ez igenis fontos dolog.  

Mi kell ahhoz, hogy Reszponzívvá tehessük a G-Portálos oldalunkat?

Erre bevezettek egy új meta elemet, ami egészen másképp fogja betölteni az oldalakat. Ha megnézünk egy alap gportálos oldalt mobilon (vagy bármilyen oldalt, ami nem reszponzív), az oldalt kicsinyítve tölti be, utána kell még nagyítgatni, hogy meg lehessen rajta jobban nézni, amire kíváncsiak vagyunk. Ezzel az elemmel azonban akkorában fog betöltődni az oldal, amekkora a mobilunk szélessége. Ha nincs mobilbaráttá téve a weboldal, akkor ezt nem szabad bekapcsolni, különben használhatatlanná teheti az oldalt kisebb felbontásokban. Ez az új elem szerencsére már elérhető a gportálon, a Vezérlő > Beállítások - Haladó beállítások részben, a HTML5 doctype-pal együtt engedélyezni kell.

Ettől még előrébb nem igazán jutottunk, úgyhogy nézzük a további teendőket. Először is felejtsük el a pixeleket. Persze sokkal kényelmesebb pixelekben gondolkodni, de épp ez az, amitől nem lesz felbontásbarát a weblap soha. Csak gondoljunk bele: adott egy 1920px széles monitor, és egy 460px széles mobil. Ha a szokásos layout-ot készítenénk el, 1000px-es oldalszélességgel, már ott gondban lennénk a telefonnal, hiszen az már a 2x méreténél is nagyobb. Ezért pixel helyett használjunk %-ot, mint mértékegységet. Ez teljes rugalmasságot biztosít nekünk. 

Rengeteg reszponzív tesztelős böngésző plugin van már (Responsive Tester néven pl), hasznos lehet ezeket is kipróbálni.

A Stílus & felület alatt nem árt az oldalszélességet is Automatikusra állítani, különben ugyanott leszünk, mint az elején.

Az alapfelállás legyen az, hogy az oldalsáv 30% helyet foglal el, a tartalom pedig a maradék 70%-ot. Ezt az alábbi módon tudjuk elérni:

.sitemain .sitecol:first-child{ 
    width: 30%;
}
.sitemain .sitecol:nth-child(2){ 
    width: 70%; /* használhatunk auto-t is akár */
}

A fenti példa arra az esetre jó, hogyha egy oldalsávot használunk, és az a baloldalon van. Jobb oldalsáv esetén csak fel kell cserélni a kettőt. Ha pedig mindkét oldalra szeretnénk modulokat helyezni, csak hozzá kell adni egy újabb blokkot: .sitemain .sitecol:nth-child(3){..} , ezzel beállíthatjuk a jobb oldali sávot is.

Kiemelten hasznos itt a böngészőben lévő Vizsgáló használata, hiszen vannak fix értékek is, amiket nem mi adtunk meg, így ezeket nem könnyű észrevenni: mint például az alábbi kód is, ami nem igazán engedi, hogy az a 30%-os oldalsáv 160px-tól különböző legyen. A fix méret helyett használjunk 100%-ot.

.column_side {
    width: 100%; /* width: 160px; helyett */
}

Ha most elkezdünk az ablakmérettel játszani, máris látszik, hogy az arányok megmaradnak egymáshoz képest. Ettől még sokkal kényelmesebb nem lett a weboldal használata, de már jó úton haladunk felé.

Amik igazán kényelmessé fogják tenni, azok a media query-k. Ezek arra jók, hogy felismerik az eszközt, amin megjelenítjük a weboldalt, így különböző felbontásokhoz teljesen más szerkezetet alakíthatunk ki. Például azt szeretnénk, hogy az oldalsáv és a tartalmi sáv egymás alatt helyezkedjenek el, egyforma szélességben. 460px szélességben a 30%-os oldalsáv már igencsak olvashatatlan.

@media screen and (max-width: 680px) {
    .sitemain .sitecol, .column_side_td {
        width: 100% !important;
        display:block;
    }
}

A fenti kód az egészen a 680px szélességig úgy fogja megjeleníteni a weboldalt, hogy egymás alá helyezi a két sávot. (Ha a tartalmi részt szeretnénk felülre, akkor célszerű az oldalsávot jobbra állítani). A média queryk-ről majd egy következő tutorialban lesz szó bővebben.

Megjegyzés:

Nem mindenki szereti, hogyha az oldal egyik széltől a másikig ér, és ezzel nincs is semmi baj, erre is van megoldás: ahogyan korábban a .site{} - ban megadtuk az oldalszélességet (fixen), ott most is megadhatjuk, %-ban. a margin: auto-val pedig továbbra is középrehelyezhető az oldal.

Max-width helyett természetesen megadható min-width is, illetve a kettő keveréke is, így számtalan különböző stílust készíthetünk, bármekkora felbontáshoz. pl.

@media only screen 
and (min-device-width : 680px) 
and (max-device-width : 1024px) {
/* 680px és 1024px közötti felbontásokhoz ez a formázás lesz */
}

Illetve a { .. } kapcsok közé akár egy teljes css kódot is írhatunk, ezáltalán tényleg teljesen eltérő stílust adhatunk a különböző nézetekhez.

Készítettem egy alap CSS kódot is, igaz nincs kész, de a lényeg benne van: