Vom începe să dezvolte un aspect adaptiv, alexdev

În cele din urmă am decis să înceapă dezvoltarea de aspect adaptiv.

Deci, ceea ce este aspectul adaptiv?

„Receptivă web design (web design engleză Sensibilă.) - pagina de web design care oferă afișare excelentă a unui site pe o varietate de dispozitive care sunt conectate la Internet.“

Datorită aspectul adaptivă a site-ului va fi de înaltă calitate și de afișare ușor de utilizat pe dispozitive diferite, cum ar fi:

În fiecare zi, aspect de adaptare este din ce în ce mai popular. Site-uri adaptive apar tot mai mult.

Pentru a începe dezvoltarea de aspectul adaptivă vom încerca să facă o simplă galerie de imagini care se va afișa bine pe diferite ecrane dispozitive.

Pentru a începe, încercați să creați o imagine normală, care se va întinde pe întregul ecran.

Extrem de simplu. Doar înfășurat o imagine într-un container.

Am stabilit lățimea imaginii egală cu lățimea containerului div. Din această cauză, în cazul în care div redus. apoi scade img.

Ca rezultat, vom obține o imagine care este întinsă pentru a umple ecranul, dacă ecranul este de 320 * 240 pixeli sau un ecran cu o rezoluție de 1920 * 1080 pixeli.

Lățimea maximă și minimă

După cum se vede în acest exemplu, dacă avem un ecran foarte mare, sau invers este foarte mică, imaginea va fi fie prea greu pentru a întinde o pierdere de calitate sau micsora prea mult.

Pentru a rezolva această problemă definim imaginea o anumită lățime minimă și maximă.

Acum recipient și, prin urmare, imaginea va varia în limite rezonabile de la 500 la 1000 de pixeli în lățime.

Galerie foto

Și acum încearcă să creeze minigalereyu.

Vom folosi principiile deja cunoscute la noi.

În HTML am adăugat doar câteva imagini și înfășurat totul într-un singur div.

Fiecare imagine din galerie se va schimba acum dimensiunea sa, în funcție de recipient. Am adăugat, de asemenea, o mică liniuță cu 1% pe fiecare parte a frumuseții.

Deci, am creat o galerie mică, care este bine afișată pe diferite ecrane. Avem adaptabilitate.

Dar asta nu e tot.

În acest exemplu, puteți evidenția un mare dezavantaj: în imagine pe un ecran mic va fi fie prea mici sau apare defilare în browser.

Dar acest lucru poate fi corectat, dar cum - va învăța în articolul următor! 😉

Vă mulțumesc pentru atenție!

Aboneaza-te la newsletter-ul 😉