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ă)
-
Vă permite să încărcați diferite imagini în funcție de condițiile:
-
Ceea ce oferă acest lucru:
- Î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:
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. 🙂