Imagine adaptivă pentru site

Imaginile din designul adaptiv (adaptare) sunt cunoscute ca fiind unul dintre cele mai complexe aspecte. Este necesar să se țină seama de fiecare element, astfel încât totul să arate exact pe diferite dispozitive și ecrane, de la ecrane mari la ecrane de 320 de pixeli. Deoarece timpul în care monitoarele "pătrate" dispare, acestea sunt înlocuite treptat cu televizoare, monitoare și tablete cu ecran lat. Imaginile trebuie comprimate și întinse corespunzător.

Soluția generală

De regulă, am folosit mai devreme codul CSS următor pentru a face adaptarea imaginii:

Utilizăm lățimea maximă a proprietății: 100%, astfel încât imaginea să nu depășească niciodată containerul părinte (bloc). Prin urmare, când modificați blocul însuși, în care este localizată imaginea, dimensiunea imaginii se va schimba în consecință. Și înălțimea proprietății: auto; Ea este responsabilă pentru menținerea proporționalității laturilor imaginii la scalare.

O nouă soluție la problemă (imagine adaptivă)

Este o nouă etichetă care a apărut în versiunea HTML5. Vă permite să faceți imaginile adaptive și principiul lor de funcționare este similar cu etichetele

Vă permite să încărcați diferite imagini în funcție de condițiile:

Rezultatele interogărilor media;

Densitatea pixelilor.

Încărcarea celei mai optime și potrivite imagini;
Imaginea poate fi tăiată în funcție de formatul ecranului;
Descărcați imagini de dimensiuni mari pentru monitoare cu rezoluție ridicată.

Cum funcționează eticheta ?

Luați în considerare pașii:

Creați o etichetă de deschidere și de închidere .

În interiorul acestei etichete, scriem atât de multe etichete . câte condiții sunt necesare.

În atributul media al etichetei scriem acele condiții de înălțime sau lățime la care este necesar să arătăm această imagine.

Utilizați atributul srcset pentru a specifica calea spre imagine.

Adăugarea unei etichete suplimentare de imagine .

Poate că ați observat deja că sintaxa folosită în atributul media este foarte asemănătoare cu sintaxa CSS a interogărilor media. De asemenea, ca condiții, puteți utiliza valoarea maximă a lățimii. min-lățime. max-înălțime. min-înălțime. orientare.

Utilizați aceste verificări pentru a specifica condițiile pentru poziția orizontală sau verticală a tabletei sau a dispozitivului mobil, precum și dimensiunea maximă a ecranului. De exemplu:

Aceasta înseamnă că puteți încărca o versiune specifică a imaginii, în funcție de rezoluția ecranului utilizatorului.

utilizarea

Această etichetă este bine susținută de Chrome, Opera și Firefox. În viitor, se planifică ca această etichetă să aibă o aplicație largă.

După descărcarea fișierului picturefill.js, conectați-l între etichete :

Această etichetă încărcată cu acest plugin va funcționa cu unele limitări.

Adaptabilitatea site-ului a devenit o prioritate atunci când a fost creată. După crearea corectă a structurii, nu este necesară crearea unei versiuni mobile a site-ului. Deoarece șablonul în sine va fi ajustat la rezoluția corespunzătoare. 🙂

Articole similare

Pagina anterioară