Aflați cum navigatorii web determină afișarea utilizând valori procentuale
Mulți studenți ai design-ului web receptiv au un timp dificil folosind procentele pentru valorile lățimii. Mai exact, există o confuzie cu modul în care browserul calculează acele procente. Mai jos veți găsi o explicație detaliată a modului în care procentele funcționează pentru calculele de lățime într-un site web receptiv.
Utilizarea pixelilor pentru valorile de lățime
Când utilizați pixeli ca valoare de lățime, rezultatele sunt foarte simple. Dacă utilizați CSS pentru a seta valoarea lățimii unui element în antetul unui document la o lățime de 100 de pixeli, acel element va avea aceeași dimensiune ca cea pe care o setați la o lățime de 100 de pixeli în conținutul sau subsolul paginii Web sau în alte zone ale pagină. Pixelii sunt o valoare absolută, deci 100 de pixeli sunt de 100 de pixeli indiferent de unde apare în document un element. Din păcate, în timp ce valorile pixelilor sunt ușor de înțeles, acestea nu funcționează bine în site-urile web responsabile.
Ethan Marcotte a inventat termenul "design web receptiv", explicând această abordare ca fiind conținând trei principii cheie:
- O grilă fluidă
- Medii fluide
- Întrebări media
Primele două puncte, o grilă fluidă și un mediu fluid sunt realizate prin utilizarea procentelor, în loc de pixeli, pentru valorile de dimensionare.
Utilizarea procentelor pentru valorile de lățime
Când utilizați procente pentru a stabili o lățime pentru un element, mărimea reală la care se afișează elementul va varia în funcție de locul unde se află în document. Procentajele sunt o valoare relativă, adică dimensiunea afișată este relativă la alte elemente din document.
De exemplu, dacă setați lățimea unei imagini la 50%, aceasta nu înseamnă că imaginea va fi afișată la jumătate din dimensiunea normală. Aceasta este o concepție greșită.
Dacă o imagine are lățime nativă de 600 de pixeli, atunci utilizarea unei valori CSS pentru ao afișa la 50% nu înseamnă că va avea o lățime de 300 de pixeli în browserul web. Această valoare procentuală este calculată pe baza elementului care conține imaginea respectivă, nu a dimensiunii native a imaginii în sine. Dacă containerul (care ar putea fi o divizie sau alt element HTML) are o lățime de 1000 de pixeli, atunci imaginea va fi afișată la 500 de pixeli, deoarece această valoare este de 50% din lățimea containerului. Dacă elementul care conține este de 400 pixeli lățime, atunci imaginea va fi afișată la 200 de pixeli, deoarece această valoare este de 50% din container. Imaginea în cauză are o dimensiune de 50% care depinde complet de elementul care o conține.
Amintiți-vă că designul receptiv este fluid. Aspectul și dimensiunile se vor schimba pe măsură ce dimensiunea ecranului / dispozitivul se modifică . Dacă vă gândiți la acest lucru în termeni fizici, non-web, este ca și cum ai avea o cutie de carton pe care o completezi cu material de ambalaj. Dacă spui că caseta ar trebui să fie pe jumătate umplută cu acel material, cantitatea de ambalaj de care ai nevoie va varia în funcție de dimensiunea casetei. Același lucru este valabil și pentru lățimile procentuale în designul web.
Procente bazate pe alte procente
În exemplul imagine / container, am folosit valori pixel pentru elementul care conține, pentru a arăta cum ar fi afișată imaginea receptivă. În realitate, elementul conținut ar fi de asemenea setat la un procent și imaginea sau alte elemente din interiorul containerului ar obține valorile bazate pe un procentaj procentual.
Iată un alt exemplu care arată acest lucru în practică.
Spuneți că aveți un site web în care întregul site este conținut într-o divizie cu o clasă de "container" (o practică comună de design web). În interiorul acelei diviziuni există alte trei diviziuni pe care în cele din urmă le veți expune ca 3 coloane verticale. Acest HTML poate arăta astfel:
Acum, puteți utiliza CSS pentru a seta dimensiunea acelei diviziuni "container" pentru a spune 90%. În acest exemplu, divizia de containere nu are un alt element care să o înconjoare decât corpul, pe care nu am stabilit-o nici o valoare specifică. În mod prestabilit, corpul va face ca 100% din fereastra browserului. Prin urmare, procentajul diviziei "container" se va baza pe dimensiunea ferestrei browserului. Pe măsură ce fereastra browserului se modifică în mărime, la fel va fi dimensiunea acestui "container". Deci, dacă fereastra browserului are o lățime de 2000 de pixeli, această divizie se va afișa la 1800 de pixeli. Acesta este calculat ca 90% din 2000 (2000 x .90 = 1800)), care este dimensiunea browser-ului.
Dacă fiecare dintre diviziunile "col" găsite în "container" sunt setate la o dimensiune de 30%, atunci fiecare dintre ele va avea o lățime de 540 pixeli în acest exemplu. Acesta este calculat ca 30% din cei 1800 de pixeli pe care containerul le face la (1800 x .30 = 540). Dacă am modificat procentajul containerului, aceste diviziuni interioare s-ar schimba, de asemenea, în dimensiunea pe care o fac, deoarece sunt dependente de acel element care conține.
Să presupunem că ferestrele browserului au o lățime de 2000 de pixeli, dar schimbăm valoarea procentuală a containerului la 80% în loc de 90%. Asta inseamna ca se va face acum la 1600 de pixeli (2000 x .80 = 1600). Chiar dacă nu schimbăm CSS-ul pentru dimensiunile celor trei divizii "col" și le lăsăm la 30%, ele vor deveni diferite, deoarece elementul lor care conține, care este contextul în care sunt dimensionate, sa schimbat. Cele trei diviziuni vor avea acum câte 480 pixeli fiecare, ceea ce reprezintă 30% din 1600 sau dimensiunea containerului (1600 x .30 = 480).
Dacă ar fi existat o imagine în interiorul uneia dintre aceste diviziuni "col" și imaginea a fost dimensionată cu un procentaj, contextul pentru dimensiunea sa ar fi "col" în sine. Pe măsură ce diviziunea "col" se schimba în mărime, la fel și imaginea din interior. Deci, dacă mărimea browser-ului sau a "containerului" sa schimbat, aceasta ar afecta cele trei diviziuni "col", ceea ce ar schimba dimensiunea imaginii în interiorul colului. După cum puteți vedea, toate acestea sunt conectate când este vorba de valori de dimensionare bazate pe procentaj.
Când luați în considerare modul în care un element din interiorul unei pagini web se va afișa atunci când se utilizează o valoare procentuală pentru lățimea sa, trebuie să înțelegeți contextul în care elementul respectiv se află în marcajul paginii.
În concluzie
Procentajele joacă un rol esențial în crearea layout-ului pentru site-urile web responsabile . Indiferent dacă fotografiați în mod sensibil imaginile sau utilizați lățimi procentuale pentru a crea o rețea cu adevărat fluidă ale cărei dimensiuni sunt relativ una față de cealaltă, înțelegerea acestor calcule va fi necesară pentru a obține aspectul dorit.