Paginile de aspect adaptive ale site-ului - ca un ghid pentru a face exemple, ca parte a design-

Adaptive aspect - o activitate care vizează crearea unei structuri de pagini web care se poate adapta cu ușurință pentru a se potrivi fereastra browser-ului.

Care este aspectul paginii adaptivă

Până relativ recent, atunci când se apropie de mai multe site-uri din partea de jos a browser-ului, puteți vedea cursorul, oferind o pagină pe orizontală defilare. Acest lucru sa întâmplat, de exemplu, în cazul în care fereastra de Internet Explorer nu a fost maximizat, și este o zonă relativ mică. De asemenea, ar putea aproape întotdeauna vizibile atunci când rezoluția ecranului, care emite o imagine a fost de 800 de 600 sau, mai ales, 640 x 480 pixeli.

Astăzi, cu un astfel de rar întâlnite chiar și proprietarii de dispozitive mobile. Și motivul pentru aceasta constă nu numai în faptul că rezoluția de display-uri de astăzi HD sau de mai sus, dar, de asemenea, în faptul că aspectul paginii de adaptare a devenit acum aproape standard de.

De ce și când va exista un design de adaptare?

La începutul celui de al doilea deceniu al secolului XXI nu a fost nevoie acerbă de a crea tehnologii pentru a dezvolta pagini web generice. Principalele ipoteze care au provocat crearea și dezvoltarea designului receptiv, au fost următoarele:

afluxul masiv de noi utilizatori la Internet;
apariția unei multitudini de dispozitive cu diferite rezoluții de ecran;
presiune de la motoarele de căutare, care au început să aplice sancțiuni împotriva site-urilor, la care au participat mai multe variante de pagini cu același conținut.

Ceva timp mai târziu, un alt designer de web și Podcaster celebru propus adăugiri la conceptele cărora spus colegului său.

Prin care și cum să creați un aspect de adaptare?

CSS3 - o nouă generație de Cascading Style Sheets. Această tehnologie este destinat să creeze regulile pentru afișarea elementelor unei pagini din browser-ul utilizatorului. Cu ajutorul acesteia puteți specifica, de exemplu, dimensiunea corespunzătoare a unei celule la o anumită rezoluție a ecranului utilizatorului, sau setați regula pe care ar trebui să ia întotdeauna un anumit procent din spațiu (100% - umplere întregul browser spațiul de lucru).

Este în a treia generație a apărut CSS regulă „interogări media“, cu ajutorul cărora programatorul poate crea clase separate pentru fiecare rezoluție.

Un punct foarte important!

O persoană care intenționează să utilizeze CSS3 pentru aspectul de design receptiv, ar trebui să fie conștienți de faptul că, spre deosebire de CSS2, nu pixeli, iar procentele utilizate în a treia generație de foi de stil în cascadă pentru a specifica dimensiunea obiectelor.

În ceea ce privește HTML5, apoi cu ajutorul lui se realizează în mod direct aspectul paginii, adică statele în care ar trebui introduse anumite elemente. Obiecte pentru a ajusta rezoluția în parametrul HTML-tag-ul este specificat în prealabil prin folosirea claselor CSS3.

Un exemplu simplu de aspect adaptive

Pentru a înțelege ce aspectul adaptivă, exemple ar trebui să fie cât mai simplu posibil. Prin urmare, considerăm cazul în care imaginea pregătită este reglată automat pentru a se încadra în spațiul de lucru browser-ul.

Începeți prin element HTML post pe pagina în sine:

DIV Meta - indică faptul că toate încheiate în ea, este o unitate separată. Atunci când „clasa“ puncte atribut la o pagină de o mulțime de blocuri. Este necesar să se înțeleagă browser-ul, care regula să fie aplicată unui anumit bloc.

Acum, trebuie doar pentru a crea regula în sine, așa-numitul,

În acest cod, trebuie doar să setați permisiunile pentru aspectul adaptiv. În special, acesta a indicat că lățimea (Wight) trebuie să adauge întotdeauna până la 100% din lățimea spațiului de lucru browser-ul web, în timp ce înălțimea (înălțime) este reglată automat.

Verificați aspectul adaptiv

Puteți face chiar mai ușor. Pentru a verifica dacă o lucrare de design adaptiv, trebuie să țineți apăsată tasta CTRL, apoi faceți clic pe „+“ sau „-“. După această operație, pagina trebuie să fie mărită sau micșorată în mod corespunzător, dar elementul la care aspectul adaptiv aplicată, păstrează raportul dintre proporțiile sale (sau a face altceva, ceva care a fost specificat în normele).

Instrumente care simplifică aspectul de proiectare receptiv

design layout receptivă - sarcină foarte consumatoare de timp. Prin urmare, pentru a reduce timpul de punere în aplicare a acestor proceduri, este mai bine să utilizeze unelte speciale. Ca unul dintre acestea pot fi menționate Bootstrap cadru, cunoscut *.

Acest set de instrumente pentru HTML și CSS, de exemplu, include un număr mare de template-uri de clasă preparate care pot fi utilizate în dezvoltarea de proiectare. Acesta conține, de asemenea, o aspecte dinamice, care sunt în conformitate cu toate reglementările și standardele permit crearea elementelor adaptive.

Pentru a începe să utilizați este necesar, în primul rând, de a dobândi cunoștințe despre ei înșiși în mod direct la HTML5 și CSS3, și apoi să examineze caracteristicile cadrului. Cu toate acestea, pentru a înțelege mai multe dintre subtilitățile de a lucra cu el, atunci puteți reduce în mod repetat, timpul de dezvoltare a proiectului de adaptare a site-urilor Web.

* Bootstrap - software-ul este open source, dezvoltat de către Corporation Twitter Inc. Distribuite gratuit și are o comunitate largă, care este întotdeauna posibil pentru a cere sfaturi.

articol Spune-le prietenilor: