Meniu
AcasăErori

Ce este aspectul adaptiv. Aspect adaptiv pe HTML5 și CSS3 Ce puteți face după finalizarea acestui curs

Am lansat o nouă carte, Social Media Content Marketing: How to Get Inside Your Followers' Heads and Make them to Love with Your Brand.

În special, această tehnologie este utilizată în mod activ pentru a se asigura că site-ul este afișat în mod egal pe diferite tipuri de dispozitive: computere/laptop-uri și smartphone-uri/tablete cu diferite dimensiuni de afișare.

Astăzi, un site web receptiv este creat folosind limbajul de marcare HTML5 și foile de stil în cascadă CCS3. Dar până când tehnologiile corespunzătoare au devenit standard pentru toate browserele populare, limbajul de programare JavaScript a fost folosit în scopurile corespunzătoare. Chiar și mai devreme (înainte de 2010), au fost nevoiți să creeze mai multe versiuni ale acelorași pagini, dar cu un marcaj diferit, astfel încât site-ul pe care l-au dezvoltat să fie afișat corect pe ecrane diferite.

De ce aveți nevoie de un aspect adaptiv al paginii?

Până de curând, când vizitați multe site-uri web, puteai vedea un glisor în partea de jos a browserului care derula pagina pe orizontală. Acest lucru s-a întâmplat, de exemplu, dacă fereastra browserului de Internet nu a fost maximizată pentru a umple întregul ecran, ci a ocupat o zonă relativ mică. Acest lucru se putea observa aproape întotdeauna și atunci când rezoluția ecranului pe care era afișată imaginea era de 800 pe 600 sau, cu atât mai mult, 640 pe 480 pixeli.

Astăzi, chiar și proprietarii de dispozitive mobile se confruntă rar cu acest lucru. Și motivul pentru aceasta constă nu numai în faptul că rezoluția ecranelor moderne este HD sau mai mare, ci și în faptul că aspectul adaptiv al paginii a devenit acum aproape un standard.

De ce și când a apărut designul responsive?

La începutul celui de-al doilea deceniu al secolului 21, a existat o nevoie presantă de a crea tehnologii care să permită dezvoltarea paginilor web universale. Principalele premise care au provocat crearea și dezvoltarea designului adaptiv au fost:

  • aflux masiv de noi utilizatori pe internet;
  • apariția multor dispozitive cu rezoluții diferite de ecran;
  • presiunea motoarele de căutare, care au început să aplice sancțiuni împotriva site-urilor care aveau mai multe versiuni de pagini cu același conținut.

Persoana care a creat prima dată este oficial web designerul Ethan Marcotte. La mijlocul anului 2010, a publicat un material în care vorbea despre tehnologia care ar trebui să rezolve problema afișării normale a paginilor web în browsere cu rezoluții diferite ale spațiului de lucru.

După ceva timp, un alt și cunoscut podcaster a oferit completări la conceptele despre care vorbea colegul său.

Cu ce ​​și cum este creat aspectul adaptiv?

Înainte de a începe să luăm în considerare problema modului de realizare a unui aspect adaptiv, este necesar să luăm în considerare pe scurt principalele tehnologii utilizate. Acum există două dintre ele: HTML5 și CSS3. Până de curând se foloseau HTML4 și CSS2, dar pentru a crea design universal cu ele, trebuia să folosești și JavaScript.

CSS3 este următoarea generație de foi de stil în cascadă. Această tehnologie are scopul de a crea reguli pentru afișarea elementelor paginii în browserul utilizatorului. Folosind-o, puteți specifica, de exemplu, ce dimensiune ar trebui să aibă un element la o anumită rezoluție a ecranului utilizatorului sau puteți stabili o regulă ca să ocupe întotdeauna un anumit procent de spațiu (100% - umplerea întregii zone de lucru a browser).

În a treia generație a apărut regula „interogări media”, folosind care designerul de layout poate crea clase separate pentru fiecare rezoluție specifică.

Un punct foarte important!

O persoană care intenționează să folosească CSS3 pentru design responsive ar trebui să știe că, spre deosebire de CSS2, a treia generație de Foi de stil în cascadă utilizează procente mai degrabă decât pixeli pentru a specifica dimensiunile obiectelor.

În ceea ce privește HTML5, este folosit pentru a marca direct pagina, adică pentru a indica unde trebuie plasate anumite elemente. Pentru ca obiectele să se adapteze la rezoluție, clasele pre-create folosind CSS3 sunt specificate în parametrii etichetelor HTML.

Un exemplu simplu de aspect adaptiv

Pentru a înțelege ce este aspectul adaptiv, exemplele ar trebui să fie cât mai simple posibil. Prin urmare, vom lua în considerare o opțiune în care imaginea pregătită este ajustată automat la rezoluția spațiului de lucru al browserului.

Mai întâi, folosind HTML, vom plasa elementul în sine pe pagină:

Eticheta DIV - indică faptul că tot ceea ce conține este un bloc separat. Când există multe astfel de blocuri pe o pagină, este specificat atributul „clasă”. Acest lucru este necesar pentru ca browserul să înțeleagă ce regulă să aplice pentru un anumit bloc.

Acum trebuie să creați regula în sine, așa-numita

Container CSS:

Div ( lățime: 100%; text-align: center; ) div img( lățime: 100%; înălțime: automat; )

În acest cod, sunt setate permisiunile pentru aspectul adaptiv. În special, se precizează că lățimea ar trebui să fie întotdeauna 100% din lățimea zonei de lucru a browserului web, în ​​timp ce înălțimea este reglată automat.

Verificarea aspectului adaptiv

Există instrumente speciale pentru verificarea aspectului adaptiv. De exemplu, în browserul GoogleChrome, puteți apăsa tasta „F12”, apoi, în panoul care se deschide, faceți clic pe pictograma cu imaginea unui smartphone și a unei tablete. După această acțiune, vor apărea mai multe panouri în care trebuie să specificați rezoluția de interes.

Se poate face și mai simplu. Pentru a verifica dacă designul receptiv funcționează, trebuie să țineți apăsat CTRL și apoi să faceți clic pe „+” sau „-”. După această acțiune, pagina ar trebui să crească sau să scadă corespunzător, dar elementul căruia i se aplică aspectul adaptiv va păstra raportul proporțiilor sale (sau să facă altceva, ceea ce a fost specificat în reguli).

Instrumente care facilitează designul receptiv

Aspectul designului adaptiv este o sarcină destul de intensivă în muncă. Prin urmare, pentru a reduce timpul de implementare a tuturor acestor proceduri, este mai bine să folosiți instrumente speciale. Unul dintre acestea poate fi numit binecunoscutul cadru Bootstrap*.

Acest set de instrumente pentru HTML și CSS, de exemplu, include un număr mare de clase pre-construite pe care le puteți folosi în design. Conține și unele dinamice, care, în conformitate cu toate regulile și standardele, vă permit să creați elemente adaptative.

Pentru a începe să-l utilizați, trebuie mai întâi să obțineți cunoștințe direct despre CSS3 și HTML5, apoi să studiați caracteristicile cadrului. Cu toate acestea, după ce ați înțeles cele mai multe complexități ale lucrului cu acesta, puteți reduce ulterior în mod semnificativ timpul de dezvoltare a designului adaptiv al site-ului web.

*Bootstrap este un software open source dezvoltat de Twitter Inc. Este distribuit gratuit și are o comunitate largă de la care poți oricând să ceri sfaturi.

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 prefixele browserului pentru proprietăți):

Aspect adaptiv al site-ului

2. Antetul paginii

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