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.
A Responsive Web Design (RWD) egy olyan tervezési módszert jelent, amelynek célja, hogy optimális megjelenést biztosítson (egyszerű olvashatóság, könnyű navigálhatóság) a különböző eszközökön (mobil eszközöktől a nagyobb felbontású monitorokig).
A felbontásfüggő szabályokat például a következő módon tudjuk elhelyezni a CSS-kódban:
@media screen and (max-width: 850px) {
}
A fenti kód csak korszerű, a CSS3 ezen funkcióját támogató böngészőkben vezet eredményre.
A fenti blokkban elhelyezett definíciók a képernyőre mint médiumra vonatkoznak, abban az esetben, ha az ablak 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;
}
}
Ezzel a szabállyal felül akarjuk írni a korábbi definíciót, ezért ügyeljünk arra, hogy a CSS-állomány végére tegyük ezeket a szabályokat!
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ét oszlopos 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:
Készítsd el azt a sablont, amely azt mutatja meg, hogy egy blogbejegyzés hogyan jelenne meg önállóan az oldalon!
Emlékeztetőül az alábbiakban láthatod ezen oldal drótváz tervét.
lumzy_eliteblogbejgyezes_full.jpgAz Alaplap blog blogbejegyzés aloldalának vázlatos terve  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.