Aspect adaptiv folosind html5 și css3. Curs video „Aspect adaptiv în HTML5 și CSS3. Stiluri pentru blocul de conținut principal

Aspectul adaptiv al site-ului permite paginilor web să se adapteze automat la ecranele tabletelor și smartphone-urilor. Traficul pe internet mobil crește în fiecare an și, pentru a procesa eficient acest trafic, trebuie să oferiți utilizatorilor site-uri web receptive cu o interfață ușor de utilizat.

Motoarele de căutare folosesc o serie de criterii pentru a evalua capacitatea de răspuns a unui site atunci când este vizualizat pe dispozitive mobile. Google încearcă să simplifice utilizarea internetului pentru proprietarii de smartphone-uri și tablete prin marcarea site-urilor adaptate pentru dispozitive mobile cu un marcaj special pentru mobil în rezultatele căutării mobile. Yandex are, de asemenea, un algoritm care dă preferință site-urilor cu o versiune mobilă/responsive pentru utilizatorii din căutarea mobilă.

Puteți verifica afișarea paginii pe dispozitivele mobile pe serviciile și.

Orez. 1. Rezultatele căutării mobile de la Yandex și Google cu o notă despre compatibilitatea site-ului cu dispozitivele mobile. Ce este aspectul adaptiv?

Aspectul adaptiv presupune absența unei bare de defilare orizontale și a unor zone scalabile atunci când sunt vizualizate pe orice dispozitiv, text care poate fi citit și zone mari pentru elementele pe care se poate face clic. Folosind interogări media, puteți controla aspectul și plasarea blocurilor pe o pagină, rearanjand șablonul astfel încât să se adapteze la diferite dimensiuni ale ecranului dispozitivului.

Tehnicile de bază pentru crearea unui site web responsive sunt prezentate în articol. Pentru design responsive, lățimea containerului site-ului principal este setată în % și poate fi egală cu 100% din lățimea ferestrei browserului sau mai puțin. Lățimea coloanelor grilei este de asemenea specificată în %. În designul responsive, lățimea containerului principal și a coloanelor grilei este fixată folosind valori px.

Tehnica de layout fluid adaptiv discutată în această lecție va funcționa perfect pe un șablon cu două coloane, făcând site-ul adaptabil și convenabil pentru vizualizare pe dispozitive mobile. Șablonul presupune un aspect diferit al conținutului principal al paginilor; în această lecție va fi discutat aspectul paginii principale.

Aspectul paginii de pornire

O pagină constă din trei blocuri principale: un antet (antet), un container pentru conținutul principal și bara laterală și un subsol (subsol). Să luăm 768px și 480px ca puncte de cotitură a designului.

La primul punct, vom ascunde meniul de sus și vom muta bara laterală sub containerul cu postări. În al doilea punct, vom schimba locația elementelor antetului, vom anula poziționarea butoanelor rețelei sociale în postări și vom anula încadrarea coloanelor de subsol a paginii.


Orez. 2. Exemplu de aspect adaptiv 1. Meta-etichete și secțiune

1) Adăugați fișierele necesare în secțiune - un link către fonturile utilizate, biblioteca jQuery, precum și pluginul fără prefixe (pentru a nu scrie prefixe de browser pentru proprietăți):

Aspect adaptiv al site-ului

2. Antetul paginii

Vom plasa următoarele elemente container în antetul paginii:
siglă

ARTICOLE SIMILARE