Mulți studenți la designul web receptiv au dificultăți în utilizarea procentelor pentru valorile lățimii. Mai exact, există confuzie cu modul în care browserul calculează aceste procente. Mai jos veți găsi o explicație detaliată a modului în care funcționează procentele pentru calculele lățimii într-un site web receptiv.
Utilizarea pixelilor pentru valori de lățime
Când folosești pixeli ca valoare a lățimii, rezultatele sunt foarte simple. Dacă folosești CSS pentru a seta valoarea lățimii unui element din antetul unui document la 100 de pixeli lățime, acel element va fi aceeași dimensiune ca una pe care ați setat-o la 100 de pixeli lățime în conținutul sau subsolul site-ului web sau în alte zone ale paginii. Pixelii sunt o valoare absolută, deci 100 de pixeli sunt 100 de pixeli indiferent de locul în care apare un document în documentul dvs. Din păcate, deși valorile pixelilor sunt ușor de înțeles, ele nu funcționează bine cu site-urile web responsive.
Ethan Marcotte a inventat termenul „Design web receptiv”, explicând această abordare ca conținând 3 principii cheie:
- O rețea fluidă
- Medii fluide
- Interogări media
Primele două puncte, o rețea fluidă și un mediu fluid sunt realizate folosind procente, în loc de pixeli, pentru dimensionarea valorilor.
Utilizarea procentelor pentru valorile lățimii
Când utilizați procente pentru a stabili o lățime pentru un element, dimensiunea reală pe care elementul o afișează va varia în funcție de locul în care se află în document. Procentele sunt o valoare relativă, ceea ce înseamnă că dimensiunea afișată este relativă la alte elemente din documentul dvs.
De exemplu, dacă setați lățimea unui imagine până la 50%, acest lucru nu înseamnă că imaginea va fi afișată la jumătate din dimensiunea sa normală. Aceasta este o concepție greșită obișnuită.
Dacă o imagine are de fapt o lățime de 600 de pixeli, atunci utilizarea unei valori CSS pentru a o 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 acea imagine, nu a dimensiunii reale a imaginii în sine. Dacă containerul (care ar putea fi o diviziune sau un alt element HTML) are o lățime de 1000 de pixeli, atunci imaginea va fi afișată la 500 de pixeli, deoarece valoarea respectivă este de 50% din lățimea containerului. Dacă elementul care conține are o lățime de 400 de pixeli, atunci imaginea va fi afișată doar la 200 de pixeli, deoarece valoarea respectivă este de 50% din container. Imaginea în cauză are o dimensiune de 50%, care depinde complet de elementul care o conține.
Nu uitați, designul receptiv este fluid. Aspectele și dimensiunile se vor schimba pe măsură ce dimensiunea ecranului / modificările dispozitivului. Dacă vă gândiți la acest lucru în termeni fizici, non-web, este ca și cum ați avea o cutie de carton pe care o umpleți cu material de ambalare. Dacă spuneți că cutia ar trebui să fie umplută pe jumătate cu acel material, cantitatea de ambalaj de care aveți nevoie va varia în funcție de dimensiunea cutiei. Același lucru este valabil și pentru lățimile procentuale din designul web.
Procente bazate pe alte procente
În exemplul imagine / container, am folosit valori pixel pentru elementul conținător pentru a arăta cum s-ar afișa imaginea receptivă. În realitate, elementul care conține ar fi, de asemenea, setat ca procent, iar imaginea sau alte elemente, în interiorul acelui container, își vor obține valorile pe baza unui procent de procent.
Iată un alt exemplu.
Să presupunem că aveți un site web în care întregul site este cuprins într-o divizie cu o clasă de „container” (o practică obișnuită de proiectare web). În interiorul acelei diviziuni sunt alte trei divizii pe care le veți stiliza în cele din urmă pentru a le afișa ca 3 coloane verticale.
Acum, puteți utiliza CSS pentru a seta dimensiunea diviziei „container” la 90%. În acest exemplu, diviziunea containerului nu are un alt element care îl înconjoară în afară de corp, pe care nu l-am setat la nicio valoare specifică. În mod implicit, corpul va reda 100% din fereastra browserului. Prin urmare, procentul diviziei „container” se va baza pe dimensiunea ferestrei browserului. Pe măsură ce fereastra browserului își schimbă dimensiunea, la fel se va schimba și dimensiunea acestui „container”. Deci, dacă fereastra browserului are o lățime de 2000 de pixeli, această diviziune se va afișa la 1800 de pixeli. Acesta este calculat ca 90% din 2000 (2000 x .90 = 1800)), care este dimensiunea browserului.
Dacă fiecare dintre diviziunile „col” găsite în „container” este setată la o dimensiune de 30%, atunci fiecare dintre acestea va avea o lățime de 540 pixeli în acest exemplu. Acesta este calculat ca 30% din cei 1800 de pixeli pe care containerul îi redă (1800 x .30 = 540). Dacă am schimba procentajul acelui container, aceste diviziuni interioare s-ar schimba și în dimensiunea pe care o redau, deoarece sunt dependente de acel element de container.
Să presupunem că ferestrele browserului rămân la 2000 de pixeli lățime, dar schimbăm valoarea procentuală a containerului la 80% în loc de 90%. Asta înseamnă că va reda la 1600 pixeli lățime acum (2000 x .80 = 1600). Chiar dacă nu schimbăm CSS pentru dimensiunea celor 3 divizii „col” și le lăsăm la 30%, ele vor redau diferit acum, deoarece elementul lor conținător, care este contextul în care sunt dimensionate, are schimbat. Aceste 3 divizii vor fi redate acum cu 480 de lățimi fiecare, adică 30% din 1600, sau dimensiunea containerului 1600 x .30 = 480).
Luând acest lucru și mai departe, dacă ar exista o imagine în interiorul uneia dintre aceste diviziuni „col” și acea imagine ar fi dimensionată folosind un procent, contextul pentru dimensionare ar fi „col” în sine. Pe măsură ce diviziunea „col” s-a schimbat în dimensiune, la fel și imaginea din interior. Deci, dacă dimensiunea browserului sau a „containerului” s-ar schimba, aceasta ar afecta cele trei divizii „col”, care, la rândul lor, modificați dimensiunea imaginii din interiorul „col.” După cum puteți vedea, toate acestea sunt conectate atunci când vine vorba de dimensionarea procentuală valori.
Când luați în considerare modul în care se va reda un element din interiorul unei pagini web atunci când este utilizată o valoare procentuală pentru lățimea sa, trebuie să înțelegeți contextul în care acel element se află în marcajul paginii.
În concluzie
Procentele joacă un rol critic în crearea aspectului pentru site-urile web responsive. Indiferent dacă dimensionați imaginile în mod receptiv sau utilizați lățimi procentuale pentru a crea o rețea cu adevărat fluidă ale cărei dimensiuni sunt relative unul față de celălalt, înțelegerea acestor calcule va fi necesară pentru a obține aspectul dvs. dorință.