Úton a reszponzív arculat felé

Esettanulmány

Esettanulmányként nézzünk egy képzeletbeli blog oldalt, ami az Alaplap Blog nevet kapta. Az oldal struktúráját már kialakítottuk, és a szükséges stíluslapot is létrehoztuk, azonban ez az arculat csak 800 képpont szélességig folyékony. A továbbiakban tovább alakítjuk, hogy a kisebb felbontást használó eszközökön is optimálisabb megjelenést kapjunk.

A következőkben letölthetővé tesszük azt a kiindulási állapotot, amelyet tovább fogunk alakítani.

A továbbiakban úgy fejlesztjük tovább a sablont, hogy az kisebb felbontásokban is optimális megjelenést adjon. Az eddig kifejlesztett arculat 800 képpont szélességig biztosítja a megfelelő megjelenést, ennél kisebb felbontásban már kényelmetlen a bejegyzések olvasása.

Láttuk, hogy a felbontásfüggő szabályokat a következő módon tudjuk elhelyezni a CSS kódban:

@media screen and (max-width: 850px) {
}

A fenti blokkban elhelyezett definíciók a képernyőre mint médiumra vonatkoznak, abban az esetben, ha a viewport mérete maximum 850 képpont. Természetesen a minimális szélességet is megadhatnánk a min-width tulajdonsággal.

Mielőtt továbbfejlesztenénk az oldalsablont, a CSS-állományt módosítsuk úgy, hogy a body tagnél már ne legyen megadva minimális szélesség (min-width), vagyis töröljük – vagy tegyük megjegyzésbe – a min-width:800px; definíciót!

A képernyő átméretezésekor az első zavaró körülmény az lesz, hogy a további bejegyzések szakaszban a két egymás mellett lévő doboz már olyan keskeny lesz, hogy kényelmetlen az elolvasásuk. Oldjuk meg azt, hogy ha a képernyő mérete kisebb, mint 850 képpont, akkor ezek a dobozok ne egymás mellett legyenek, hanem töltsék ki a rendelkezésre álló hely nagyobb részét.

Ezt a következő kóddal egyszerűen el is érhetjük:

@media screen and (max-width: 850px) {
section#tovabbibejegyzesek article {
float:none;
width:95%;
margin-left:0;
text-align:justify;
margin-top:10px;
border:1px;
 }
}

Ezek után azt tapasztaljuk, hogy a böngésző átméretezésekor a megadott határt átlépve a bejegyzések nem kerülnek egymás mellé, így jóval olvashatóbbá válnak.

Egy bizonyos szélesség alatt már a fenti megoldás sem ad jó eredményt, akkor már a kétoszlopos elrendezés miatt a jobb oldali oszlopban lévő bejegyzéseket is kényelmetlen olvasni. Ebben az esetben megtehetjük, hogy a bal oldali blokkot a tartalom mögött jelenítjük meg, a bejegyzéseknek így még nagyobb hely jut. Ezt úgy érhetjük el, hogy felülírjuk a korábbi elrendezést, megszüntetjük az elemek lebegtetését.

@media screen and (max-width: 700px) {
section#bejegyzesek {
float: none;
width: 100%;
}
section#bejegyzesek section {
margin-left: 0; 
}
section#blokkok {
float: none;
width: 90%; 
margin:0 20px 0 0 ;
}
}

Ekkor viszont a menü is az oldal aljára kerül. Ebben az esetben érdemes megjeleníteni a képernyőn azt az oldalmenüt, amit a HTML-sablonunkban elhelyeztünk, de eddig ki volt pozícionálva a képernyőről, hogy az a vizuális böngészőprogramokban ne látszódjon, a vak látogatók viszont el tudják érni a képernyőolvasóval. Ezen kívül megtehetjük, hogy az alaplap logó helyett csak a címsor szövegét jelenítjük meg.

@media screen and (max-width: 600px) {
header nav#oldalmenu {
position:static;
display:block;
left:0;
top:0;
margin:10px;
}
 header nav#oldalmenu ul {
margin-left:20px;
list-style-type:square;
}
 header h1:first-child {
background-image:none;
text-indent:0;
height:auto;
margin-top:25px;
}
 header {
height:auto;
}
 section#ikonsor {
margin:10px;
right:0;
top:0;
}
 section#ikonsor img {
width:25px;
background-image:none;
padding:1px;
margin-right:10px;
}
 section#kereses {
position:static;
margin:10px;
}
 nav#nyomvonal {
width:90%
}
}

Az oldalunk most már az alábbi animációban látható módon viselkedik:

Vissza a tartalomjegyzékhez