Mësoni se si shfletuesit e internetit përcaktojnë një ekran duke përdorur vlerat e përqindjes
Shumë studentë të dizajnit të përgjegjshëm web kanë një kohë të vështirë duke përdorur përqindjet për vlerat e gjerësisë. Në mënyrë të veçantë, ka konfuzion me mënyrën se si shfletuesi llogarit ato përqindje. Më poshtë do të gjeni një shpjegim të detajuar se si përqindjet punojnë për llogaritjet e gjerësisë në një faqe interneti të përgjegjshme.
Përdorimi i pikselëve për vlerat e gjerësisë
Kur përdorni pixels si një vlerë gjerësie, rezultatet janë shumë të drejtpërdrejta. Nëse përdorni CSS për të vendosur vlerën e gjerësisë së një elementi në kokë të një dokumenti deri në 100 pixels të gjera, ky element do të jetë i njëjti madhësi si ai që keni vendosur në 100 pikselë të gjerë në përmbajtjen e faqes ose në fusha të tjera të faqes faqe. Pikselat janë një vlerë absolute, kështu që 100 pixels janë 100 piksele, pavarësisht se në dokumentin tuaj shfaqet një element. Për fat të keq, ndërsa vlerat e pikselëve janë të lehta për t'u kuptuar, ato nuk funksionojnë mirë në faqet e internetit të përgjegjshme.
Ethan Marcotte shpiku termin "dizajn të përgjegjshëm të uebit", duke shpjeguar këtë qasje si të përmbajë 3 parime kyçe:
- Një rrjet fluide
- Media me lëngje
- Pyetjet e mediave
Këto dy pikat e para, një rrjet lëngu dhe media fluide, arrihen duke përdorur përqindjet, në vend të pikseve, për vlerat e përmasave.
Përdorimi i përqindjeve për vlerat e gjerësisë
Kur përdorni përqindjet për të vendosur një gjerësi për një element, madhësia aktuale që shfaqet në element do të ndryshojë në varësi të vendit ku ndodhet në dokument. Përqindjet janë një vlerë relative, që do të thotë se madhësia e shfaqur është relative me elementët e tjerë në dokumentin tuaj.
Për shembull, nëse vendosni gjerësinë e një imazhi në 50%, kjo nuk do të thotë që imazhi do të shfaqet në gjysmën e madhësisë së tij normale. Ky është një keqkuptim i zakonshëm.
Nëse një imazh është natyre 600 pixels i gjerë, atëherë duke përdorur një vlerë CSS për ta shfaqur atë në 50% nuk do të thotë se do të jetë 300 pixels e gjerë në shfletuesin e internetit. Kjo vlerë e përqindjes llogaritet në bazë të elementit që përmban atë imazh, dhe jo madhësisë amtare të vetë imazhit. Nëse ena (e cila mund të jetë një ndarje ose një element tjetër HTML) është 1000 piksele, atëherë imazhi do të shfaqet në 500 piksele, pasi që vlera është 50% e gjerësisë së enës. Nëse elementi që përmban është 400 pixels i gjerë, atëherë imazhi do të shfaqet vetëm në 200 pixels, pasi kjo vlerë është 50% e enës. Imazhi në fjalë këtu ka një madhësi 50% e cila varet tërësisht nga elementi që e përmban atë.
Mos harroni, dizajni i përgjegjshëm është i lëngët. Formatimet dhe madhësitë do të ndryshojnë me ndryshimin e madhësisë së ekranit / pajisjes . Nëse mendoni për këtë në terma fizikë dhe jo të internetit, është sikur të kesh një kuti kartoni që mbushni me material paketues. Nëse thoni se kutia duhet të jetë gjysmë e mbushur me atë material, shuma e paketimit që ju nevojitet do të ndryshojë në varësi të madhësisë së kutisë. E njëjta gjë vlen edhe për gjerësinë e përqindjes në web design.
Përqindjet në bazë të përqindjeve të tjera
Në shembullin e imazhit / kontejnerit, kam përdorur vlerat e pikselëve për elementin që përmban për të treguar se si do të shfaqet imazhi i përgjegjshëm. Në realitet, elementi që përmban do të vendoset gjithashtu në një përqindje dhe imazhi, ose elementë të tjerë, brenda asaj konteniere do të merrnin vlerat e tyre bazuar në një përqindje të një përqindjeje.
Ja një shembull tjetër që tregon këtë në praktikë.
Thuaj që keni një faqe interneti ku faqja e tërë gjendet brenda një ndarjeje me një klasë të "kontejnerit" (një praktikë e zakonshme e dizajnit të uebit). Brenda kësaj ndarjeje janë tre ndarje të tjera që do të përfundoni në stilin e shfaqjes si tre kolona vertikale. Ky HTML mund të duket kështu:
Tani, ju mund të përdorni CSS për të vendosur madhësinë e asaj ndarje "enë" për të thënë 90%. Në këtë shembull, ndarja e enëve nuk ka një element tjetër që e rrethon atë ndryshe nga trupi, të cilin ne nuk i kemi caktuar ndonjë vlere të veçantë. Sipas paracaktimit, trupi do të shfaqë 100% të dritares së shfletuesit. Prandaj, përqindja e "kontenierëve" do të bazohet në madhësinë e dritares së shfletuesit. Pasi që dritarja e shfletuesit ndryshon në madhësi, ashtu do të jetë edhe madhësia e këtij "kontejner". Pra, nëse dritarja e shfletuesit është 2000 pixels e gjerë, kjo ndarje do të shfaqet në 1800 piksela. Kjo llogaritet si 90 përqind e vitit 2000 (2000 x .90 = 1800)), që është madhësia e shfletuesit.
Nëse secili prej ndarjeve "col" që gjenden brenda "kontejnerit" vendosen në një madhësi prej 30%, secili prej tyre do të jetë 540 piksel i gjerë në këtë shembull. Kjo llogaritet si 30% e 1800 pixels që kontejneri bën në (1800 x .30 = 540). Nëse ndryshuam përqindjen e atij kontejneri, këto ndarje të brendshme do të ndryshonin gjithashtu në madhësinë që ato japin pasi ato janë të varura nga elementi që përmban.
Le të supozojmë se dritaret e shfletuesit mbeten në 2000 pikselë të gjerë, por ne ndryshojmë vlerën e përqindjes së enës në 80% në vend të 90%. Kjo do të thotë se do të paraqitet në 1600 piksele tani (2000 x .80 = 1600). Edhe nëse nuk e ndryshojmë CSS për madhësinë e divizioneve tona 3 "col" dhe i lëmë ata në 30%, ata do ta bëjnë ndryshe tani që elementi i tyre që përmban, i cili është konteksti me të cilin janë përmirësuar, ka ndryshuar. Këto 3 divizione tani do të japin 480 pixels të gjera secila, që është 30% e 1600, ose madhësia e enës (1600 x .30 = 480).
Duke e marrë këtë edhe më tej, në qoftë se kishte një imazh brenda një prej këtyre ndarjeve "col" dhe se imazhi ishte përmbledhur duke përdorur një përqindje, konteksti për përmasat e tij do të ishte vetë "col". Ndërsa kjo ndarje "col" ndryshoi në madhësi, ashtu do të ishte imazhi brenda saj. Pra, nëse ndryshoi madhësia e shfletuesit ose "enë", kjo do të ndikonte në tre ndarjet "col", të cilat do të ndryshonin madhësinë e imazhit brenda "col". Siç mund ta shikoni, të gjitha këto janë të lidhura kur bëhet fjalë për vlerat e caktimit të përqindjes.
Kur të mendoni se si do të shfaqet një element brenda një faqeje web kur përdoret një vlerë përqindje për gjerësinë e saj, duhet të kuptoni kontekstin në të cilin ky element gjendet në shënimin e faqes.
Në Përmbledhje
Përqindjet luajnë një rol kritik në krijimin e faqosjes për faqet e internetit të përgjegjshme . Nëse jeni duke përdorur imazhe në mënyrë të përgjegjshme ose duke përdorur gjerësi të përqindjes për të bërë një rrjet me të vërtetë fluid, madhësia e të cilit është e lidhur me njëri-tjetrin, të kuptuarit e këtyre llogaritjeve do të jetë e nevojshme për të arritur pamjen që dëshironi.