Invalid RSS feed!

Bevezetés a responsive tervezésbe – Rácsszerkezet

-

Ismerkedjünk meg a responsive tervezés világával. A sorozatban átvesszük a tervezési szemlélethez kapcsolódó fogalmakat, területeket. 

rwd-cover-4

A responsive tervezés egyik alappillére a folyékony rácsszerkezet. A fluid grid (folyékony rácsszerkezet) egy olyan tervezési megoldás, ahol a fix, pixelben mérhető egységek helyett, relatív (százalékos) értékeket adunk meg a szerkezeti elemeinknek. A megoldással elérhetjük, hogy a sablonunk igazodjon az aktuális kijelző mérethez.

A folyékony tervezés valójában egy egész régi technika, azonban egészen elhanyagolt volt a használata a tervezők körében (még magyarul is jelent meg könyv a témában a Kiskapu kiadásában). Ahogy megjelentek a különböző méretű monitorok, úgy velük együtt jött az igény is egy olyan megoldásra, amivel egyszerűen tudunk adaptálni egy sablont az egyik méretről a másikra, úgy hogy minden felbontáson megfelelő eredményt kapjunk. Természetesen a módszer segítségével nem csak a kis kijelzőjű készülékekhez alkalmazkodhatunk, hanem a nagyobbakhoz is. Igaz, csak ezzel a megoldással nem fedhetünk le minden méretet, hiszen a szerkezeti felépítés megmarad, csak az elemek szélessége változik.

Amikor relatív értékekkel tervezünk, akkor a fő befoglaló elemünk mindig a megjelenítési területhez viszonyít. Tehát ha százalékban adjuk meg a fő konténer elem szélességét, akkor ez a böngészőablak méretéhez igazodva számolja ki a megadott szélességet.

A folyékony szerkezeteknél általában fixálni szokták a maximum szélességet a max-width CSS tulajdonság segítségével. Ha , mi csak 1600 pixel szélességig szeretnénk optimalizálni az oldalunkat, akkor ezzel a tulajdonsággal könnyedén beállíthatjuk, hogy a megadott szélesség felett az oldal ne “nyúljon” tovább.

 Értékek átszámítása

Kezdetben egy kicsit szokatlan, hogy közvetlenül nem adhatjuk meg mi legyen az adott elemek szélessége, azonban egy rövid képlet segítségével mindez nagyon gyorsan orvosolható. A relatív értékek használatában nincs semmi nehézség! A hangsúly a viszonyított értékeken van, minden elem az őt befoglaló elemhez viszonyul. A fő befoglaló elemünknek is rendelkeznie kell egy alap százalékos szélességgel (amit aztán a max-width tulajdonsággal már pixelben is megadhatunk) ahhoz, hogy folyékony legyen. Ez az érték általában a megjelenítési terület 90%-a szokott lenni.

A számítási képlet a következő: cél elem (aktuális elem) / befoglaló elem = érték (százalékban).

A számítást megkönnyítő képlet.
A számítást megkönnyítő képlet.

Készítsük el az első folyékony szerkezetünket

Nincs más hátra, mint készíteni egy folyékony oldal szerkezetet. A lent található két CodePen dokumentumban megtalálhatjuk az előtte utána verziót. Egy nagyon egyszerű, két hasábos szerkezetről van szó. Elsőként jöjjön a fix szerkezet, majd utána a folyékony!

See the Pen Responsive tervezés – Rácsszerkezet / fix by Adam Laki (@adamlaki) on CodePen.

A fenti példában a container osztály kijelölővel ellátott div elem foglalja keretbe a szerkezetet, amit a content és sidebar kijelölővel ellátott elemek jelentenek. A content (600px széles) és sidebar (360px széles) elem balra és jobbra van úsztatva helyezkednek el, valamint egy-egy szürke háttérszínt is kaptak. Ez egy jól megszokott példa, amiben nincs semmi újdonság számunkra. Valószínű, hogy már nagyon sokat dolgoztunk fix szerkezettel. Ezeknek a szélessége jellemzően 960px, amit még az 1024px széles monitorok miatt alakult ki, ez volt az a maximális szélesség, amit a legjobban kilehetett használni (ma már nem feltétlenül mérvadó, a keretrendszerek mint a 960.gs már nem igazán népszerűek, a helyüket átvette a temérdek responsive keretrendszer). Megfigyelhetjük, hogy amikor összehúzzuk a böngésző ablakát (miután kitettük nagyba a pen-t), megjelenik a vízszintes görgetősáv, jelezve, hogy bizony fix mérettel van dolgunk, vagyis a szerkezet nem alkalmazkodik a megjelenítési területhez.

See the Pen Responsive tervezés – Rácsszerkezet / fluid by Adam Laki (@adamlaki) on CodePen.

A fluid szerkezet létrehozásához nem kell mást tennünk, mint hogy százalék értékre állítjuk az elemek szélességét. A container elemünknek 90%-os szélességet adtunk meg, ami kellő távolságra van a megjelenítési terület széleitől (a főbefoglaló elemünk méretét ugyan akkorára nem adhatjuk meg, mint fix méret esetében, hiszen ez mindig viszonyított szélesség). A százalékos értékek nem befolyásolják az igazításokat, ugyan úgy működnek, mint fix értékek esetében, tehát a középre igazítás és az úsztátással nem kell foglalkoznunk.

A content elemre alkalmazzuk a képletet, tehát a befoglaló elem, vagyis a container 960px-es értékével elosztjuk a saját szélességét, ami 600px: 600/960 = 0.625 (megkaptuk a két elem arányát, amit alkalmazhatunk a folyékony szerkezeten). Figyeljünk arra, hogy ezt még meg kell szoroznunk 100-al, hogy a megfelelő értéket kapjuk, ami így 62.5%. Ugyan ezt elvégezzük a sidebar esetében: 360/960 = 37.5%. Miután lecseréltük a 3 elem szélességét látható is a változás, ha össze, vagy szét húzzuk a böngészőt, akkor a szerkezet adaptálja a szélesség változását.

A p elemek padding értékének a beállítása maradt még hátra. Itt a befoglaló elem a content és a sidebar div elemek lesznek, tehát: 20/600 = 3.33% és 20/360 = 5.55%. Mivel viszonyított értékekről van szó, mind a két különböző szélességű elemnek ugyan akkora lesz a padding értéke (igaz, hogy a százalékos értékek eltérőek, de az adott elem és a pedding érték aránya megegyező). Ebben a példában a padding értékét is százalékban adtuk meg, így ez is alkalmazkodik majd a megjelenítési terület méretéhez, azonban általános gyakorlat, hogy a padding, margin értékeket pixelben szokás megadni!

Összegzés

A fenti rövid, egyszerű módosításokkal a szerkezetünk folyékony lett. Természetesen a fejlesztéshez célszerű saját vagy előre elkészített keretrendszert használni, ahol előre kiszámítjuk az egyes oszlopok szélességét, amit azután majd könnyedén tudunk gyorsan használni!

A sorozat további részei

Szolgáltatások

Full-stack webfejlesztés

01.

Egyedi weboldalt szeretnél?

WordPress CMS-el fejlesztve megvalósítjuk elképzeléseid. Készítünk egy modern oldalt, amivel felveheted a versenyt a konkurenciával.

02.

Komplex webes ötleted van?

Teljes körű alkalmazásfejlesztési szolgáltatást nyújtunk, amennyiben van egy olyan ötleted, vagy terved, ami nem valósítható meg kész megoldásokkal.