Pe bloguri și forumuri, întâlnesc periodic un astfel de concept precum responsive web design și oameni care întreabă ce este. M-am hotarat sa rezumam putin.
Wikipedia definește acest concept ca un design cu ajutorul căruia se realizează „percepție excelentă pe diferite dispozitive”. Eu nu am înțeles formularea, pentru că, aparent, apar întrebări.
În realitate, totul este mai simplu: acest termen se referă la crearea unor astfel de site-uri care vor fi afișate diferit pe diferite dispozitive - pe un monitor larg, pe un ecran obișnuit, pe o tabletă și pe un telefon mobil.
În același timp, adaptabilitatea nu trebuie confundată nici cu un aspect simplu din cauciuc, în care aspectul DIV este realizat în așa fel încât pagina să se întindă pur și simplu pe lățimea afișajului, sau cu crearea de versiuni mobile ale site-urilor, care sunt cel mai adesea situate pe un subdomeniu separat, cum ar fi m.vashsayt.ru.
Capacitatea de reacție este definită în primul rând prin definirea diferitelor proprietăți CSS în funcție de rezoluția afișajului - folosind atribuirea condiției ecranului @media și proprietățile CSS min-device-width, max-device-width.
Iată un exemplu de cod pentru a face o pagină receptivă - va fi afișat diferit pe un monitor obișnuit cu o rezoluție de 1200 de pixeli și pe un afișaj de telefon mobil cu o rezoluție de 640 de pixeli:
Ecran @media și (lățime maximă: 1200 px) { /* începutul condiției */
#main { /* conținutul va fi în stânga */ lățime: 75%; plutește la stânga;}
#sidebar { /* bara laterală va fi în dreapta */ lățime: 25%; plutire: dreapta;}
} /* sfârșitul condiției */
@media ecran și (max-width: 640px) { /* începutul condiției */
#main { /* conținutul se va extinde pe întregul ecran */ lățime: 100%; }
#sidebar { /* bara laterală va fi poziționată dintr-o nouă linie */ lățime: 100; }
} /* Sfârşitconditii */
În general, este timpul să aruncați vechile metode și să încetați să utilizați eticheta space în html și, în schimb, să treceți la CSS și tehnologiile responsive! Principalul lucru este să nu uitați să verificați valabilitatea site-ului))