Ce este Responsive Web Design

• Mai 1, 2024

Există trei caracteristici principale ale unui design web receptiv, care sunt machete fluide, imagini redimensionabile și interogări media. Interogările media nu sunt chiar atât de noi pentru designul web. Începând ca tipuri de media în CSS2.1, am putea proiecta foi de stil atât pentru web cât și pentru tipărire, asigurând oarecum că pagina web va arăta la fel pe ecran și când va fi tipărită. Acest lucru a avansat în interogări media în CSS3. Această interogare verifică lățimea dispozitivului media (max-device-width) și o testează cu o valoare setată, cum ar fi 480px sau 768px. Ca răspuns la această întrebare, folosim stiluri CSS pentru a schimba aspectul fluidului și pentru a redimensiona imaginile pentru ecran.

Puteți testa cu ușurință dacă un site web are un design receptiv. Începeți cu browserul la toată lățimea ecranului computerului. Apoi trageți marginea din dreapta a browserului spre stânga pentru a reduce lățimea ferestrei browserului. Ar trebui să vedeți că imaginile devin mai mici și aspectul va lua div-urile plutitoare care sunt una lângă alta și le va stiva vertical. De exemplu, dacă avem șase imagini (șase div-uri) pe rând pe o pagină de galerie la ecran complet, pe măsură ce reducem lățimea ecranului, numărul de imagini dintr-un rând sunt reduse și stivuite progresiv, după cum este necesar. Odată ce lățimea este redusă la o anumită cantitate, imaginile în sine vor începe să redimensioneze mai mici. Dacă urmăriți îndeaproape, veți vedea, de asemenea, că anumite elemente de design, cum ar fi legăturile de navigație, pot fi reduse la o pictogramă sau chiar pot dispărea. Acest lucru este controlat și de fișa de stil CSS.

Când proiectați site-uri web, luați în considerare nu numai modul în care elementele de proiectare a paginii web vor arăta la lățimea întregului ecran, dar cum vor arăta când sunt stivuite. Luați în considerare elementele de design care pot fi eliminate din ecran la o lățime mai mică a ecranului, fără a reduce funcționalitatea site-ului web. Deoarece caracteristicile și tehnologia pentru proiectarea receptivă se schimbă rapid, păstrarea la zi a tuturor îmbunătățirilor poate dura mult timp. Dacă preferați să vă petreceți timpul proiectând în loc să codați, aruncați o privire la unele dintre temele frumoase de răspuns disponibile pentru Wordpress. Dacă sunteți o firmă de proiectare mică, este posibil să doriți să luați în considerare pornirea de la unul dintre aceste aspecte tematice responsabile atunci când proiectați site-uri web.

Instrucțiuni Video,: Introduction To Responsive Web Design - HTML & CSS Tutorial (Mai 2024).