Cum sa faci un design de adaptare a site-ului sub toate rezoluțiile de ecran
Salutări, vizitatori ocazionali și blog-ul cititori regulate Royal-Site.ru!
Cu ceva timp în urmă, am actualizat blog-ul meu, crearea de la zero o temă complet pentru WordPress. Despre cum sa întâmplat, am scris în articolul „actualizare globală și să se reorganizeze site-ul meu“. Una dintre principalele sarcini când se creează un nou șablon - un aspect de adaptare a site-ului pentru toate rezoluțiile de ecran.
Un plan de scurt articol:
Intr-un articol anterior am scris că acest design adaptiv și de ce ai nevoie de ea. Dar cum de a realiza acest lucru foarte adaptabilitate?
Cum sa faci un site aspect adaptiv
În primul rând, dacă vii să impună un design de adaptare a site-ului, între etichetele
Ce prost am fost, nu a făcut acest lucru imediat, în timp ce încerca să facă un aspect de adaptare a site-ului.
Problema browsere mobile în aspectul site-ului la scară lor, chiar și de adaptare.
Dar acest lucru nu poate fi!
Se pare că, dacă nu vă înregistrați codul pe care l-am indicat mai sus, browser-ul mobil nu înțelege că site-ul este adaptiv și este pur și simplu încercarea de a reduce pagina a site-ului, astfel încât a ajuns într-un mic ecran de telefon mobil.
Din cauza prostiei și incompetența lor, am pierdut o mulțime de timp. Dar acum îmi amintesc pentru totdeauna))).
Adaptive aspect interogări media CSS
Pentru a face aspectul site-ului adaptiv folosind CSS, trebuie să utilizați interogări media.
Cum e asta? Da, foarte simplu. În fișierul CSS, trebuie să vă înregistrați interogări, cum ar fi:
Acest cod înseamnă că stilurile sunt făcute între "<> „Va lucra pentru ecrane cu o lățime minimă și maximă 1440px 1599px.
Asta este, aceste stiluri sunt elemente ale site-ului, care ar trebui să fie adaptate în funcție de rezoluția ecranului trebuie să fie înregistrate separat pentru fiecare lățime posibilă a ecranului.
Cea mai importantă rezoluție a ecranului, cu un aspect adaptiv
- 320 px - Dispozitive mobile (orientare portret);
- 480 px - Dispozitive mobile (peisaj);
- 600 px - Plăci de dimensiuni mici;
- 768 px - plăci (orientare portret);
- 1024 px - plăci (peisaj) / netbook-uri;
- 1280 px și mai mult - PC.
Pe aceste permisiuni și trebuie să se concentreze și să le acorde o atenție specială în aspectul adaptiv. Acestea sunt cele mai comune tipuri de rezoluții de ecran.
bootstrap de design receptiv
Foarte util pentru crearea de adaptare bootstrap aspect. Confortul în faptul că toate stilurile pentru blocurile de adaptare, butoane, tabele, etc. deja înregistrate în bootstpap. Este necesar doar pentru a înțelege ce fel de clasă pentru orice element este atribuit.
Pentru a începe, descărcați cea mai recentă versiune de bootstrap și conectați-l la site-ul tau. Rețineți că legătura de stiluri și script-uri pentru WordPress are propriile sale caracteristici.
Cuibărit pe bootstrap caracterizat prin aceea că lățimea unității sau ecranul este împărțit în 12 părți egale. Și asignarea unei clase particulare de bloc poate fi egală cu lățimea dorită a numărului blocului de piese.
De exemplu, un astfel de design va selecta unul pentru un bloc conținut în lățime și 8 părți o lățime îngustă a barei laterale 4 al ecranului:
Puteți ajusta, de asemenea, liniuțele de la marginea, din nou, la numărul dorit de bucăți. De exemplu, acest design:
Lățimea blocului este setată în 10 părți Indentat în partea stângă a ecranului 1.
Dacă te uiți, ea funcționează cu bootstrap pentru a lucra cu un design web adaptabil foarte repede. La ce anume aceste stiluri funcționează corect și nu va mai fi nimic din curba de pe acest site.
Verificarea site-ului adaptabilității
Dar se pune întrebarea: cum de a testa adaptabilitatea site-ului? Aici v-ați înregistrat interogări media CSS, conectat bootstrap și de a folosi clasele. Cum să verificați dacă site-ul este adaptat corect pe toate rezoluțiile de ecran.
Foarte precise și cel mai important, un serviciu gratuit care merită respect și recunoștință de la webmasteri și web designeri, care sunt angajate în site-uri de aspect adaptive.
Da, pentru a face un design de adaptare a site-ului, aveți nevoie pentru a lucra din greu. Dar aceste munci să fie răsplătiți atitudine de susținere pentru motoarele de căutare site-ul, și cel mai important, vizitatorii site-ului.
