Cum de a construi un site adaptiv folosind css!

Toată lumea vorbește despre web design receptiv. Dar înseamnă că toată lumea înțelege ce este pentru?

Exercitarea de design receptiv - nu este numai dezvoltarea de site-uri pentru dispozitive mobile, aici vorbim despre adaptarea machete pentru diferite dimensiuni de ecran (viewport-uri).

Este important să se înțeleagă faptul că site-ul nu ar trebui să fie construit pentru un desktop specific sau dispozitiv mobil. Aici, aspectul este capacitatea importantă de a se adapta la diferite dimensiuni.

Unii oameni cred că pentru a reduce și a elimina conținutul funcțional pe care îl consideră neimportante, este normal pentru utilizator. Dar cum poți fi sigur că informațiile pe care le-ați tăiat sau mutat într-o pagină secundară care nu este conținutul care este cel mai important pentru mine?!

În primul rând, trebuie să înțelegem că exercitarea designul receptiv, nu-i pasa doar despre design mobil. În al doilea rând, dezvoltarea de site-ul bun de adaptare necesită o mulțime de timp și efort, nu numai pentru a ajuta la interogări media. Cu un număr foarte mare și în creștere de dispozitive activate pentru Web, este important să se dea site-ul dvs. o șansă de a facilita în mod eficient experiența utilizatorului.

Pentru exercitarea site-ul receptiv, putem folosi același cod pentru ambele desktop și dispozitive mobile. Acest lucru este convenabil, deoarece nu trebuie să se adapteze separat conținutul pentru fiecare dispozitiv. Dar multe site-uri ascunde conținutul lor, având în vedere că nu este necesar pentru utilizatorii mobili. În acest există două probleme:

În primul rând, în mod eficient pedepsește utilizatorii de telefoane mobile care vizionează site-ul.
În al doilea rând, stiluri ascunse în CSS, nu înseamnă că conținutul nu este descărcat. Acest lucru poate afecta masiv eficacitatea, în special pentru cei care au o conexiune proastă.

Prin urmare, cea mai bună abordare pentru proiectarea unui site web, este să ia în considerare proiectarea dispozitivelor mobile sau mici, mai întâi. Astfel, vă puteți concentra pe cele mai importante informații pe care site-ul dvs. ar trebui să dea. Și apoi, dacă este necesar, puteți utiliza metode de inițializare a condiționale în cazul în care aspectul grila, imagini mari și interogări media, aplicate peste un design-ecran mic existente.

Pentru acest tutorial, am creat un site web care este perfect scalată între ecrane mari și mici. Vă păstrați toate conținutul de pe toate dimensiunile de ecran. Și folosind interogări media, navigare va trece de la orizontală la afișare pe verticală, pentru dispozitive mai mici.

Un element-cheie de flexibilitate în designul adaptiv este lățime aspect fluid. Tot ce trebuie să faceți este să creați un înveliș, conținut și coloane cu lățimi, care se va adapta la diferite lățimi de dispozitive. Acest lucru nu este nimic nou, dar acum este mai important ca oricând. Pentru a păstra lucrurile simple, vom crea o pagină de fluid constând dintr-o navigare, imaginea principală și două coloane, care ia în considerare locația de pe dispozitive de dimensiuni diferite. Am inclus, de asemenea, respond.min.js, care permite mass-media trebuie să lucreze în IE6-8.

Structura de bază HTML:

Când vine vorba de CSS, apoi setați max-lățime, va fi o idee bună, se va opri site-ul de la zoom pe ecrane uriașe, dar nu va descuraja reducerea paginilor. Una dintre principalele probleme la trecerea de la lățime fixă fluidului, acesta este imaginea. În CSS, există o soluție simplă pentru această problemă. Pur și simplu setați lățimea imaginii la 100%. De asemenea, se adaugă la înălțimea automată a imaginii, pentru a evita imaginile aplatizate în Opera și Safari pe ecrane mici:

Imaginea dvs. va fi afișată pe elementul mamă în lățime, și va contracta cu el. Doar asigurați-vă că imaginea max-lățime, nu depășește lățimea maximă a recipientului său.

Utilizați o imagine mare poate afecta timpul de încărcare. Prin urmare, pentru ecrane mai mici, există o metodă de exercitare a imaginilor sensibile, care determină dimensiunea ecranului utilizatorului, și ieșirile de jos imaginea / mai mare, în funcție de ceea ce este necesar. Această metodă este încă dificil de a apela idealul, dar merită să ia în considerare.

Comutarea panoul principal de navigare

Principalul motiv pentru care aveți nevoie pentru a schimba navigarea, acesta are loc minimizarea, care poate duce la presare nu poate fi citit și dificil. Folosind această metodă, simplifica viața utilizatorului. De asemenea, este posibil să observați în codul pe care le-am făcut modificări în #main deoparte și secțiuni pentru a le conecta într-o singură coloană.

Vei observa că pe unele dispozitive mobile, site-ul dvs. este comprimat în mod automat la dimensiunea ecranului. De data aceasta, doar devine o problemă atunci când avem nevoie pentru a crește dimensiunea ecranului pentru a navigirovat conținutului incomod.

Pentru a permite solicitările mass-media să intre în vigoare pe deplin, un telefon mobil, optimizat, site-ul receptiv elaborarea politicilor normale ar trebui să conțină ceva de genul următoarele: