Imaginile sunt notoriu unul dintre cele mai provocatoare aspecte ale designului web receptiv. Astăzi vom examina modul în care element, o soluție la problema imaginilor receptive, pot fi utilizate chiar acum.
În primul rând, problema
Zilele designului site-ului web perfect, cu lățime fixă, sunt cu adevărat în spatele nostru. În prezent, monitoarele cu ecran lat, televizoarele pe internet, tabletele cu dimensiuni multiple și telefoanele inteligente, desenele noastre trebuie să răspundă totul, de la 320 de grade până la o lățime de 7680 pixeli.
Împreună cu acest peisaj multi-rezoluție vine nevoia ca imaginile să se întindă sau să se micsoreze pentru a se potrivi acestor cerințe sălbatic diferite. Acest lucru se poate dovedi a fi o problemă dat fiind că, cu excepția graficii vectoriale, marea majoritate a imaginilor au lățimi specifice pixelilor care nu se schimbă.
Deci ce facem?
Soluția curentă, cea mai comună
Ca regulă generală, veți găsi următoarele în aproape orice CSS de site receptiv:
img max-lățime: 100%; înălțime: auto;
Acest cod folosește max-lățime: 100%; setarea pentru a asigura că imaginile nu depășesc niciodată lățimea containerului părinte. Dacă containerul părinte se micșorează sub lățimea imaginii, imaginea se va micșora împreună cu ea. înălțime: auto; setarea asigură faptul că raportul de aspect al imaginilor este păstrat pe măsură ce se întâmplă acest lucru.
O imagine fluidă pentru toate circumstanțele
Rezolvă problema într-un anumit sens, permițându-ne să afișăm aceeași imagine în multe circumstanțe diferite. Dar nu ne permite să specificăm diferit imagini pentru circumstanțe diferite.
O nouă soluție:
este un element nou care va deveni parte din HTML5.
Acesta va aduce procesul de plasare a imaginilor receptive până la viteza cu modul în care curentul și elemente de lucru. Acesta vă va permite să plasați mai multe sursă tag-uri, fiecare specificând diferite nume de fișiere de imagine împreună cu condițiile în care trebuie încărcate.
Acesta vă va permite să încărcați o imagine complet diferită în funcție de:
Rezultatele interogărilor media, ex. înălțimea de vedere, lățimea, orientarea
Densitatea pixelilor
Aceasta, la rândul său, înseamnă că puteți:
Încărcați imagini de dimensiuni corespunzătoare ale fișierelor, utilizând cât mai bine lățimea de bandă disponibilă.
Încărcați imagini diferite decupate, cu diferite rapoarte de aspect, pentru a se potrivi cu modificările layout-ului la diferite lățimi.
Încărcați imagini cu rezoluție mai mare pentru afișări de densitate mai mare a pixelilor.
Diferite imagini au fost servite, în funcție de circumstanțe
Cum se Muncă?
Pașii de bază ai colaborării sunteți:
Creați deschiderea și închiderea Etichete.
În aceste etichete, creați un element pentru fiecare interogare pe care doriți să o executați.
Adauga o mass-media atributul care conține interogarea dvs. asupra unor lucruri precum înălțimea ferestrei, lățimea, orientarea, etc..
Adauga o srcset atribuiți cu numele de fișier al imaginii corespunzător pentru încărcare.
Adăugați nume de fișiere suplimentare la dvs. srcset atributul dacă doriți să furnizați densități diferite de pixeli, de ex. Retina se afișează.
Adăugați o rezervă element.
Iată un exemplu de bază care verifică dacă portul de vizualizare este mai mic de 768 de pixeli, atunci dacă încărcați o imagine mai mică:
Veți observa că sintaxa utilizată în mass-media atributul este același ca și cum ați fi obișnuit să creați interogări media CSS. Puteți utiliza aceleași verificări, ceea ce înseamnă că puteți interoga lățimea maximă, min lățime, max înălțime, min înălțime, orientare si asa mai departe.
Puteți utiliza aceste verificări pentru a face lucruri cum ar fi încărcarea peisajelor sau versiunilor portret ale unei imagini în funcție de orientarea dispozitivului și puteți încă să amestecați în interogări de mărime în același timp. De exemplu:
Codul de mai sus încarcă o versiune mai mică, pe verticală, a unei imagini pe un dispozitiv mai mic, orientat pe peisaj. Încarcă o versiune mai mare a aceleiași imagini pe un dispozitiv mai mare orientat pe peisaj.
Dacă dispozitivul este orientat în poziție portret, acesta încarcă o versiune trunchiată portret, la o dimensiune mică pe un dispozitiv mic sau la o dimensiune mare pe un dispozitiv mare.
Dacă doriți să furnizați versiuni de rezoluție diferite ale imaginilor pentru afișări cu densitate mai mare, faceți acest lucru adăugând nume de fișiere suplimentare la srcset atribut. De exemplu, să aruncăm o privire asupra primului fragment de cod de mai sus, cu manevra pentru rezoluția de 2x a lui Retina, adăugată:
Interogarea media este încă evaluată mai întâi pentru a putea controla dimensiunile pe care imaginea dvs. va apărea pe ecran. Apoi densitatea pixelilor afișajului va fi verificată și dacă densitățile mai mari sunt suportate și permise de preferințele utilizatorului, va fi încărcată versiunea cu densitate mai mare a imaginii.
Utilizarea Astăzi
În prezent, implementarea nativă pentru este în lucru pentru Chrome, Firefox și Opera. În viitor, probabil că vom vedea suport pe scară largă, pe măsură ce și alte browsere se vor prăbuși. Dar, pentru moment, sprijinul încă nu a ajuns încă.
Între timp, nu trebuie să așteptați dacă doriți să începeți să utilizați chiar acum. Pur și simplu trebuie să utilizați Picturefill 2.0; un polifil furnizat de acei oameni deștepți de la Grupul Filament.
După descărcarea picturefill.js fișier pentru proiectul dvs. poate fi implementat pur și simplu încărcându-l în secțiunea capului site-ului dvs.:
Există, de asemenea, o opțiune de încărcare a scriptului în mod asincron pentru o eficiență sporită, despre care puteți citi în documentația Picturefill.
Cu acest script încărcat, elementul va funcționa așa cum am explicat, cu doar câteva limitări.
Blochează imaginile
IE9
Picturefill funcționează foarte bine cu alte versiuni IE, cu toate acestea IE9 nu recunoaște sursă elemente în care sunt înfășurate imagine Etichete. Pentru a obține acest lucru, împachetați condițional elementele sursă în video tag-uri care le vor face vizibile pentru IE9, de exemplu:
Android 2.3
La fel ca IE9, Android 2.3 nu poate vedea sursă elemente în interiorul unui imagine element. Cu toate acestea, el poate înțelege srcset atribut atunci când este utilizat în mod regulat img etichetă. Asigurați-vă că întotdeauna includeți rezervarea img element cu numele de fișier implicit în srcset atribut pentru Android 2.3 și orice alte browsere care pot avea aceeași problemă.
Necesită suport pentru JavaScript și Native Media Query Support
Cu aceasta fiind o soluție bazată pe JavaScript, în consecință, este necesar ca JavaScript să fie activat în browser. Picturefill 2.0 nu oferă o soluție "no-js" deoarece, dacă s-ar întâmpla, vor apărea mai multe imagini când suportul browserului nativ pentru este lansat. Cu toate acestea, aveți opțiunea de a utiliza Picturefill 1.2 dacă o opțiune "nu-js" este o necesitate pentru dvs..
Cealaltă cerință pentru Picturefill este pentru suportul de interogare la nivel nativ, pentru a permite interogările din mass-media atribuiți muncii. Toate browserele moderne acceptă interogări media, iar IE8 și mai mic este singurul browser care nu are suport, cu o mică bază de utilizatori rămase.
Posibile solicitări extra HTTP
În browsere care au suport nativ pentru srcset, dar nu încă pentru imagine, este posibil numele fișierului specificat în rezervă img element ar putea fi solicitat înainte de o imagine mai bună de la sursă se determină elementele.
Aceasta este doar o problemă temporară și va dispărea odată nativ imagine implementarea este pusă în aplicare.
Mai multe informatii
Citiți mai multe despre Picturefill 2.0 și descărcați-o pentru proiectul dvs. pe pagina Picturefill
Obțineți informații complete cu privire la element de la responsiveimages.org.
Încearcă în proiectul de astăzi și să vedeți ce credeți!
Share
O imagine fluidă pentru toate circumstanțele
Accentsconagua
Diferite imagini au fost servite, în funcție de circumstanțe
