Înregistrați-vă acum

Logare

Parolă pierdută

Ați pierdut parola? Vă rugăm să introduceți adresa de e-mail. Veți primi un link prin e-mail, care va crea o nouă parolă.

Logare

Înregistrați-vă acum

După înregistrare, veți primi 20 de puncte în contul Dvs. Punctele respective se pot folosi la adăugarea unui articol cu link, către website-ul Dvs.

Gestionarea Breakpoints, cu Angular

Gestionarea Breakpoints, cu Angular

Gestionarea Breakpoints, cu Angular – în calitate de dezvoltatori web, de multe ori suntem obligați să creem aplicații care sunt receptive (compatibile cu dispozitivele mobile) și bogate în media. A avea astfel de cerințe, înseamnă că trebuie să lucrăm cu Breackpoints (puncte de întrerupere a imaginii), precum și cu fișiere media, deoarece vrem să oferim cea mai bună experiență utilizatorilor finali.

Adăugând aceste opțiuni la lista de cerințe, este posibil să fie necesar să folosim un cadru frontal, cum ar fi Angular. Angular este excelent pentru crearea de SPA-uri și alte tipuri de aplicații.

În acest articol, vom arunca o privire asupra Breackpoints, a cazurilor de utilizare a acestora și a unui exemplu real. Le vom implementa într-o aplicație Angular utilizând propriul Observer BreakPoint de la Angular. În timp ce folosim această abordare, vom evidenția de asemenea de ce acest cadru popular ne ajută să lucrăm cu tehnicile menționate mai sus într-un mod perfect.

Fragmente de imagine și imagini responsive

În epoca telefoanelor mobile (unde capturați puncte de rupere bazate pe dimensiunea ferestrei de vizualizare și pe baza punctului de întrerupere schimbăm aspectul paginii), trebuie să ne asigurăm că imaginile pot fi afișate cu dimensiunile potrivite – chiar și după un aspect de schimbare. Selectarea imaginii potrivite este destul de dificilă pentru site-urile moderne.

Gestionarea Breakpoints, cu Angular

Să discutăm despre două opțiuni pe care dezvoltatorii le pot utiliza în acest moment

Partea de front-end este destul de complicată în aceste zile, mai ales la website-urile vechi. De aceea publicăm articole cu tehnici utile pentru îmbunătățirea muncii Dvs. De asemenea, datorită articolelor noastre publicate pe acest website, munca Dvs., de web designer, va fi mult mai simplă.

srcset

srcset ne permite să definim o listă de imagini pe care browserul o comută între ele pe baza dimensiunii <img> și a densității afișajului.

Să aruncăm o privire la un exemplu:

<img srcset="imagine1.jpg 600w, imagine2.jpg 900w, imagine3.jpg 1440w" sizes="100vw" src="imagine.jpg" />

În exemplul de mai sus, specificăm 3 imagini, w indicând lățimea pixelilor pentru imagine. Când folosim cele de mai sus cu srcset, trebuie să specificăm atributele dimensiunilor (acest lucru este necesar deoarece dacă folosim srcset și w trebuie să avem și atributele dimensiunilor).

Care este scopul acestui atribut? Browserele trebuie să aleagă ce resursă să se încarce dintr-un set de imagini înainte de aranjarea paginii (înainte de a ști cât de mare va fi imaginea).

Ne putem gândi la dimensiuni ca o sugestie pentru browser, care după aspect, imaginea va ocupa 100% din lățimea ferestrei de vizualizare (la care se referă vw).

Browser-ul cunoaște lățimea reală a ferestrei de vizualizare (precum și DPR-ul imaginii), la timpul de încărcare, astfel încât acesta poate face calculul pentru a determina ce resursă de dimensiuni are nevoie și alege una din setul de imagini.

Combinațiile de elemente <picture> și <source media = „”> permit excluderea resurselor imaginii ca răspuns la interogările media, cum ar fi cele de la punctele de intersecție.

Să aruncăm o privire și la acest exemplu:

<picture> 
<source media="(min-width: 1440px)" srcset="../fisiere/imagini/imagine1.jpg"> 
<source media="(min-width: 900px)" srcset="../fisiere/imagini/imagine2.jpg"> 
<source media="(min-width: 600px)" srcset="../fisiere/imagini/imagine3.jpg"> 
<img src="../fisiere/imagini/imagine.jpg" /> 
</picture>

Schimbați codul de mai sus la nivel local cu o imagine aleasă de dvs., care are o dimensiune mică, medie și mare. Observați cum, prin redimensionarea browserului, obțineți o imagine diferită.

Cea mai importantă problemă din toate cele de mai sus este că, dacă vrem să schimbăm imagini la anumite puncte de întrerupere, putem folosi elementul <picture> pentru a pune interogările media direct în marcaj.

Notă: dacă sunteți interesat să explorați articole interesante despre Web Design, vă recomand să citiți articolele grozave publicate de noi pe UX Web design Romania.

Până acum, am discutat despre utilizarea punctelor de întrerupere a imaginii împreună cu interogările media într-un mediu HTML prost.

Nu ar fi mai bine să existe o modalitate convenabilă, aproape semi-automată de generare a punctelor de întrerupere a imaginii, precum și a imaginilor corespunzătoare punctelor de întrerupere chiar fără a fi nevoie să specificați interogările media?

Din fericire pentru noi Angular are un mecanism încorporat care să ne ajute și vom analiza de asemenea, generarea imaginilor adecvate în mod dinamic, pe baza anumitor condiții, prin utilizarea unui serviciu terță parte.

Despre Optimizare SEO


Urmăriți-mă!

Lăsați-ne un răspuns.

Care este capitala româniei? ( bucuresti )