A weben az általunk készített oldalaknak egy folyamatosan változó környezetben kell helyt állniuk. Manapság, ahogy a telefonjaink egyre “okosabbak”, egyre innovatívabbak és változó kijelzőmérettel megáldottak, szükséges hogy alkalmazkodjunk ezekhez a megváltozott követelményekhez. Az általunk készített weboldalnak is “okosnak”, de legalábbis responsive-nak illik lennie. Tehát összegezve,  a változás elkerülhetetlen. Az egyetlen dolog, amit tehetünk az, az alkalmazkodás … 

Responsive Webdesign

A wikipédia szerint, a kifejezést Ethan Marcotte alkotta meg 2011 elején. És a responsivitás nem más, mint egy szemlélet, amellyel elkészítjük weboldalainkat, egy eszköz a kezünkben, hogy több embert érjünk el ebben a változó környezetben. A responsive webdesign (RWD) lényege, hogy oldalainkat, az elkészítése után minden eszközön (asztali gép, laptop, tablet, mobiltelefon, e-book reader, stb.) úgy jelenítsük meg, ahogy az adott eszközön és kijelző méreten az optimális vizuális élményt kapjuk. Könnyen olvasható, a navigációs menü átméretezésével jól navigálható és támogatja az érintés alapú görgetést valamint az eszközök és kijelzőméretek  széles skáláját.

Media Query

A legújabb megoldásnak számít. A legtöbb oldal esetében a responsivitást ezzel a megoldással valósítják meg. A CCS Media Query segítségével lekérhetjük a weblap látogatója által használt készülék képernyőjének méretét, ami alapján módosíthatjuk a weblapunk megjelenését, mindezt javascript használata nélkül. Így különböző CSS utasításokat tudunk beállítani, különböző kijelző méretekhez. A következőkben mutatok pár általános méretet, persze ettől eltérőt is használhatunk:

/* 960px felbontásnál kisebb eszközök */
 @media only screen and (max-width: 959px) {}

 /* Tablet álló méret 768px-960px */
 @media only screen and (min-width: 768px) and (max-width: 959px) {}

 /* Mobil méretek */
 @media only screen and (max-width: 767px) {}

 /* Mobil fekvőtől tablet állóig */
 @media only screen and (min-width: 480px) and (max-width: 767px) {}

 /* Mobil álló mérettől mobil fekvőig */
 @media only screen and (max-width: 479px) {}