Ce este designul adaptiv (este un design sensibil și receptiv, receptiv) și cum să creezi un site adaptabil? Această lecție explică conceptul și detaliază procesul de creare a unui șablon de site adaptiv.
Designul web adaptiv este un subiect fierbinte în aceste zile, mai ales că site-urile trebuie să se adapteze la numărul tot mai mare de dispozitive mobile cu ecrane relativ mici. Mulți designeri și dezvoltatori doresc să creeze site-uri noi folosind un șablon bazat pe răspuns rapid sau să modifice site-urile existente pentru a include elemente de răspuns rapid.
Cu toate acestea, la prima vedere, acest subiect poate provoca confuzie. Proiectul adaptiv este o idee relativ nouă, care evoluează rapid. Există o mulțime de termeni complicați, cum ar fi șabloane reactive, șabloane adaptive, interogări media și ferestre de vizualizare. De unde să încep?
În acest articol, veți primi o scurtă introducere în lumea designului web adaptiv. În ...:
Sunteți gata să explorați lumea designului adaptiv? Să mergem!
Proiectare adaptivă pe scurt
Ideea principală a designului web adaptiv este că site-ul trebuie să "reacționeze" la dispozitivul pe care este vizualizat. În termeni mai largi, aceasta ar putea însemna următoarele:
elated.com a fost proiectat pentru a lucra cu ferestre de browser care au o lățime de aproximativ 1000 de pixeli.
Cu o lățime a ferestrei de 1600px, există o mulțime de spațiu neutilizat pe ambele părți ale șablonului.
Reactive sau adaptive?
Exemplu de șablon non-adaptiv
Deci, să aplicăm întreaga teorie pentru a practica și a construi un șablon adaptiv. Vom începe cu un șablon de schimbare destul de standard. Iată un simplu marcaj HTML5:
Dar fișierul CSS, main.css:
Acest șablon este destul de simplu. Acesta include:
- Heder. #header. Banda extinde întreaga lățime a ferestrei.
- Conținut. # conținut. Această zonă este pe partea stângă și ocupă 65% din lățimea ferestrei.
- Bara laterală (coloana laterală), # bara laterală. Această zonă se află în partea dreaptă a zonei cu conținut principal și ocupă 20% din lățimea ferestrei.
- Meniul de navigare. #nav. Acesta este, de asemenea, situat în partea dreaptă a site-ului, și anume în partea dreaptă a barei laterale. Acesta ocupă 15% din lățimea ferestrei.
- Subsol. #footer. Ca și în titlu, această bandă se extinde pe întreaga fereastră.
De asemenea, am înfășurat conținutul, bara laterală și navigația în #pageBody div, la care dăm lățimea maximă de 1200px, pentru a preveni întinderea prea mare a conținutului site-ului pe ferestre foarte largi ale browserului.
Modificați mărimea ferestrei browserului pentru a vedea cum se modifică șablonul în funcție de modificările lățimii zonei vizibile.
Pe măsură ce zona vizibilă se îngustează, toate elementele paginii se îngustează, de asemenea, proporțional. Toate acestea funcționează foarte bine până când lățimea browser-ului devine mai mică de 1000 de pixeli, după care trei coloane încep să se cramă unul pe celălalt. Cu o îngustare a ferestrei browserului, până la aproximativ 600px, coloanele devin atât de comprimate încât textul din interior devine necitit.
Un șablon în schimbare este bine adaptat pentru ferestrele de browser relativ largi.
Cu toate acestea, cu ferestre înguste, șablonul în schimbare nu mai funcționează corect.
Cum se face un șablon adaptabil
Evident, șablonul în schimbare, așa cum se arată mai sus, nu va funcționa bine pe ecranele înguste ale dispozitivelor mobile. În astfel de cazuri, ar trebui folosite șabloane adaptive.
Prin adaptarea șablonului nostru, putem modifica diferitele elemente ale paginii în funcție de lățimea zonei vizibile. Pentru ferestrele largi ale browserului desktop, se utilizează cele trei coloane standard, în timp ce pentru browserul îngust și ferestrele browserului mobil se folosește șablonul optim, care este mai potrivit pentru lățimea redusă.
Înțelegerea interogărilor media
Cheia pentru crearea de șabloane adaptive este standardul CSS pentru interogările media. În cazul interogărilor media, puteți crea mai multe seturi de reguli CSS care se aplică numai atunci când zona vizibilă a browserului se află într-o anumită lățime sau înălțime sau într-un interval de lățime / înălțime specificat. De exemplu, dacă creați o interogare media pentru ferestre cu o lățime mai mică de 700 de pixeli, puteți aplica un set de reguli personalizate CSS care ajustează automat elementele paginii atunci când pagina este afișată pe ferestrele înguste ale browserului.
Interogările media funcționează în aproape toate browserele moderne, cu excepția Internet Explorer 8 și a versiunilor anterioare.
Iată câteva întrebări media pe care probabil că trebuie să le folosiți atunci când construiți șabloane adaptive:
min-lățime: lățime
Se aplică dacă lățimea ferestrei este mai mare sau egală cu lățimea șablonului
max-lățime: lățime
Se aplică dacă lățimea ferestrei este mai mică sau egală cu lățimea șablonului
min-device-width: lățime
Se aplică atunci când lățimea ecranului dispozitivului este mai mare sau egală cu lățimea șablonului
max-device-width: lățime
Se aplică atunci când lățimea ecranului dispozitivului este mai mică sau egală cu lățimea șablonului
De asemenea, puteți specifica valorile exacte ale lățimii utilizând proprietățile "lățime" și "lățimea dispozitivului", deși este foarte probabil să utilizați opțiunile de lățime minimă și maximă care vă permit să specificați un interval de valori.
O altă diferență subtilă este că lățimea (min-lățimea / lățimea maximă) este măsurată în pixeli CSS, în timp ce lățimea dispozitivului (lățimea dispozitivului min / max-lățimea dispozitivului) este măsurată în pixeli ai dispozitivului. Când pagina este mărită la 100% pe dispozitivul mobil, atunci 1 pixel CSS = dispozitiv cu 1 pixel. Cu toate acestea, dacă scala paginii este redusă, atunci 1 pixel CSS este mai mic de 1 pixel în dispozitiv. Dezvoltarea ulterioară a evenimentelor este complicată de apariția unor afișaje de înaltă definiție, precum ecranul Retina Apple, în care pixelul dispozitivului poate deține mai mult de un pixel al ecranului! (Acest lucru face viața dezvoltatorului web mai ușoară, deoarece nu mai trebuie să vă faceți griji dacă afișarea dispozitivului este normală sau aceeași densitate mare).
Adaptarea la ferestre cu o lățime de 1000 sau mai puțini pixeli
- Primul set de reguli întinde lățimea conținutului de la 65% la 75%.
- Al doilea set de reguli plasează navigația în partea superioară a barei laterale, stabilind lățimea celor două elemente la 25%.
- Al treilea set de reguli elimină câmpul drept din conținutul barei laterale și adaugă în schimb câmpul de sus, astfel încât să se obțină un spațiu vertical între navigație și bara laterală.
Puteți vedea cum arată vizual. Imaginea de mai sus prezintă modelul original de cauciuc atunci când se utilizează o fereastră cu o lățime de 800px; Imaginea de jos a ecranului prezintă un șablon de adaptare cu aceeași lățime.
Primul nostru model adaptiv pentru interogarea media este în acțiune. Iată modelul inițial de cauciuc din fereastra de 800px ...
... dar un șablon adaptabil, de asemenea, cu o lățime de 800px. Rețineți că navigația este mutată într-o poziție de deasupra barei laterale, creând mai mult spațiu pentru conținut.
Adaptarea la ferestre cu o lățime de 700 sau mai puțin pixeli
Pe măsură ce fereastra se îngustează la o lățime de 700 de pixeli, chiar și noile noastre două coloane încep să pară stoarse:
Cu o lățime de 500 de pixeli, cele două coloane ale șablonului adaptiv încep să pară aplatizate.
Pentru a rezolva această problemă, putem folosi o altă interogare media pentru a reda pagina într-o coloană pentru astfel de dimensiuni îngustă a ferestrelor. Iată CSS:
Aceste seturi de reguli sunt utilizate atunci când pagina este vizualizată într-o fereastră cu o lățime mai mică sau egală cu 700 de pixeli. Aici este lista lor:
- Întindeți conținutul pentru întreaga lățime a ferestrei și îndepărtați marginea dreaptă
- Deplasând meniul de navigare peste conținut și întinzându-l pe întreaga lățime a ferestrei
- Avem navigația pe orizontală, nu pe verticală
- Deplasăm bara laterală sub conținut și o întindem pe întreaga lățime a ferestrei
Adaptarea la porturi de vizualizare cu o lățime de 480 pixeli sau mai puțin
Aceste seturi de reguli elimină linia albă în jurul marginii paginii și reduc alte liniuțe albe de la 20 pixeli la 5 pixeli, cu condiția ca lățimea ferestrei să fie redusă la 480 sau mai puțini pixeli. Acestea reduc, de asemenea, ușor indentarea antetului și a elementelor de navigație.
Încercați acest șablon în browserul dvs. Acum ar trebui să arate bine cu orice lățime a browserului, pornind de la 1600 pixeli și terminând cu 320 de pixeli.
Demo
Imaginile de mai jos arată un șablon care este vizionat pe un browser cu o lățime de 480 de pixeli, înainte și după aplicarea ultimei interogări media.
Cu o lățime a ferestrei de 480 de pixeli, șablonul cu o singură coloană pierde mult spațiu de pe ecran datorită lățimii câmpului alb de 20 de pixeli.
Îndepărtarea indentării externe și reducerea indentărilor interne la 5 pixeli și, de asemenea, reducerea indentării pentru rubrică și navigație, primim mai mult spațiu pentru plasarea conținutului.
Lucrul cu dispozitive mobile: meta-tag pentru vizualizare
Pe iPhone, modelul nostru adaptabil se comportă ca și cum lățimea ferestrei este de sub 1000 de pixeli, nu de 320 de pixeli. De ce?
Demo
De asemenea, puteți controla cu precizie lățimea ferestrei utilizând valori cum ar fi lățimea = 500 (pentru 500px) și lățimea = lățimea dispozitivului (pentru lățimea ecranului dispozitivului în modul vertical). În funcție de tipul de șablon, o setare strictă a lățimii poate fi mai bună pentru dvs. Pentru mai multe informații, consultați ghidul de conținut Web Safari.
În acest articol, ați explorat conceptul de design web adaptiv și ați încercat mai multe moduri de a crea un design adaptiv. Ce ați aflat:
- Ideea principală a designului web adaptiv. crearea de site-uri care se adaptează cu ușurință la diferitele dimensiuni ale ecranelor și dispozitivelor.
- Diferența subtilă între termenii "design web adaptiv" și "design adaptiv web".
- Cum să convertiți un model de cauciuc standard într-un șablon de adaptare. care se adaptează diferitelor dimensiuni ale browserului.
- CSS interogări mass-media și rolul lor în șabloane adaptive.
- Cum să setați dimensiunea unei ferestre de browser mobil utilizând fereastra de vizualizare meta-tag.
Cititorii vă plac:
Trimiteți-le prietenilor: