Mi az a Responsive Web Design?
A responsive web desing lehetővé teszi, hogy a weboldal minden eszközön jól nézzen ki. A responsive web design csak HTML és CSS technikát használ, nem program (pl. JavaScript).
Legjobb felhasználói élmény elérése
A weboldalakat különböző eszközökön lehet megtekinteni, mint pl. asztali gép, laptop, tablet, mobiltelefon. Alapvető cél, hogy az oldalnak jól kell kinéznie és könnyen használhatónak kell lennie minden eszközön.
A reszponzív technikával megtervezett oldal nem hagyhat ki elemeket a kisebb eszközökön, hanem a tartalmának alkalmazkodnia kell az adott eszközhöz:
Desktop
Tablet
Phone
Responsive Wed Desing-nak nevezzük azt a tervezési módszert, amikor HTML és CSS technikákat használunk ahhoz, hogy oldal tartalma minden eszközön jól használhatóan jelenjen meg.
Viewport
A Viewport a weboldalnak a felhasználó számára látható része.
A tabletek és okostelefonok megjelenése előtt a weboldalak csak asztali számítógépek kijelzőjére lettek tervezve, és gyakran fix méreteket alkalmaztak.
Amikor a tabletek és okostelefonok megjelentek, ezek a fix méretű oldalelrendezések túl nagyok voltak ahhoz, hogy elférjenek ezeken a kijelzőkön. A böngészők alapértelmezés szerint olyan nagyításban jelenítik meg az oldalt, hogy a teljes tartalom látható legyen, ez viszont olvashatatlanul kicsi kép ill. betű méreteket eredményezett. A felhasználó kénytelen volt az oldalra ránagyítani, ami viszont vízszintes oldal irányú görgetéssel jár, ami szintén nagyban rontja az oldal használhatóságát.
A Viewport beállítása
A HTML5 bevezettek egy új meta tag-et, hogy a dizájnerek szabályozhassák a viewport méretét.
A viewport <meta> tag segítségével adhatunk információt a böngészőnek arról, hogy hogyan méretezze és nagyítsa az oldalt.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A width=device-width érték azt mondja meg, hogy az oldal szélessége kövesse a kijelző szélességét.
Az initial-scale=1.0 érték atr adja meg, hogy amikor az oldal először betöltődik a böngészőben, mekkora legyen a nagyítása (1.0 = 100%)
Itt látható két példa arra, egy a viewport meta elemmel, egy pedig nélküle (a különbség érzékeléséhez csökkentsük a böngészőablak szélességét).
A tartalom igazítása a viewport-hoz
A weblapokat függőlegesen kényelmes görgetni mind asztali, mind mobil eszközökön, vízszintesen nem kényelmes. Tehát a vízszintes görgetés szükségessége nagyban rontja az oldal élvezhetőségét.
Néhány alapvető szabály:
- Ne használjunk nagy fix szélességű elemeket – egy nagy fix szélességű elem vízszintes görgetésre kényszerítheti a felhasználót
- Ne hagyjuk, hogy a tartalom egy csak bizonyos viewport szélességen jelenjen meg jól – mivel a pixelben megadott méretek és szélességek eltérőek az egyes eszközök esetén, ezért nem célszerű, ha a tartalom csak bizonyos viewport szélességen jelenik meg jól
- Használjunk CCS media query-ket a különböző képernyő méretekhez tartozó stílusok alkalmazására
Grid (rács) rendszer
Sok weblap alapul rács-nézeten, ami azt jelenti, hogy a weblap oszlopokra (column) van osztva.
A grid-rendszer használata nagyon hasznos a weblapok tervezésénél, nagyban megkönnyíti a tartalmak egységes pozicionálását az oldalon:
Grid-view
Egy reszponzív grid rendszer általában 12 oszlopból áll, a szélesség 100%, és a tartalma a böngésző ablaknak megfelelően fog zsugorodni vagy kiterjedni.
Egy reszponzív Grid-rendszer létrehozása
Elsőnek biztosítsuk, hogy minden HTML elem box-sizing tulajdonsága border-box -ra legyen állítva. Ez biztosítja, hogy a szegély (border) és a belső margó (padding) az elemek szélességébe és magasságába. (A HTML5/CSS3 doboz-modelljében alapértelmezés szerint a szélesség és magasság értékekbe csak az adott elem tényleges méret számít bele, szegélyek és margók nélkül. Ez nagyban megnehezíti az oldalelrendezés tervezését, ahol egy tartalmi elem befoglaló dobozának méretével célszerű dolgozni.)
Ezt a következő CSS kóddal érhetjük el:
* {
box-sizing: border-box;
}Ez a példa egy egyszerű, két oszlopos reszponzív oldalelrendezésre mutat példát.
Egy 12 oszlopos elrendezés létrehozásához először számítsuk ki egy oszlop szélességét, ami 100% / 12 = 8.33%. Ezután hozzunk létre 12 db CSS osztályt a 12 oszlopszélességnek megfelelően:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}Majd adjuk meg, hogy az összes oszlop legyen balra úsztatott, és 15px belső margóval (padding) rendelkezzen:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}A [class*=”col-“] szelektor kiválaszt minden elemet, aminek van egy olyan class tulajdonsága, ami tartalmazza a “col-” szöveget (ezzel azt tudjuk elérni, hogy a közös beállításokat nem kell minden egyes oszlop eseten külön megadni).
Mivel a rács-rendszerünkben nem csak oszlopokat, hanem sorokat is akarunk használni, ezen kívül az oszlopaink úsztatottak, ezért ha új sort akarunk kezdeni, szükségünk van egy .row osztályra is, ami után (::after) egy tisztázást (új sorban folytatja az elemek úsztatását) kell alkalmaznunk:
.row::after {
content: "";
clear: both;
display: block;
}A HTML kódban minden sor tartalmát egy .row osztállyal ellátott div elembe kell ágyazni:
<div class="row"> <div class="col-3">...</div> <div class="col-9">...</div> </div>
Az alkalmazott oszlop szélességek összegének 12-nek (100%) kell lenni (.col-3 = 25%, .col-9 = 75%).
Egy egyszerű példa az eddigiek összefoglalására:
CSS:
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#69c;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #069;
}
.container {
max-width: 1000px;
margin: 20px auto;
}HTML:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="container"> <div class="header"> <h1>Chania</h1> </div> <div class="row"> <div class="col-3 menu"> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>The Food</li> </ul> </div> <div class="col-9"> <h1>The City</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>Resize the browser window to see how the content respond to the resizing.</p> </div> </div> </div> </body> </html>
A példa megtekinthető itt.
Az oldal reszponzívan viselkedik, de ha a böngésző ablak (kijelző) méretét csökkentjük, akkor nem néz ki jól. Ennek kiküszöbölésének módjáról lesz szó ebben a bejegyzésben.