Cela zamisao "responsive" web dizajna je zamisljena na rad sa @media kverijima, odnosno na aktiviranjem odredjenog stila (css-a) kroz njih.

Ceo sistem funkcionise ovako :
ako sirina stranice padne izmedju 1024px i 1200px, aktiviraj taj stil, sto bi u css fajlu izgledalo ovako:
@media all and (min-device-width: 1024px) and (max-device-width: 1200px) {
/* onda ovde stavim neke stilove koji bi se aktivirali */
}

Poprilicno je jednostavno, ali ... svuda ima ali ... :D ...

Ako te interesuje odakle je krenulo to sa "responsive" dizajnom, mozes da procitas clanak o tome koji je napisao Ethan Marcotte koji je autor istoimene kljige.

Razlika izmedju staticnog i "responsive" web dizajna, jeste ta sto se kod "responsive"-a izbegava zadavanje mera (sirina, visina) tamo gde to nije potrebno,
i sve bazira na povlacenjem stilova od roditelja (izbegavanje definisanje jednos stila vise puta ... ).

Odavde možeš da kreneš:
https://developers.google.com/webmasters/smartphone-sites/