Daudziem atsaucīga tīmekļa dizaina studentiem ir grūti izmantot procentus platuma vērtībām. Konkrēti, ir neskaidrības ar to, kā pārlūkprogramma aprēķina šos procentus. Zemāk jūs atradīsit detalizētu skaidrojumu par to, kā procentuālās daļas darbojas platuma aprēķinos atsaucīgā vietnē.
Pikseļu izmantošana platuma vērtībām
Kad jūs izmantojat pikseļi kā platuma vērtību rezultāti ir ļoti vienkārši. Ja jūs izmantojat CSS lai dokumenta galvenē elementa platuma vērtību iestatītu uz 100 pikseļu platumu, šis elements būs tāda paša izmēra, kādu iestatījāt 100 pikseļu platumā vietnes saturā, kājenē vai citos lapas apgabalos. Pikseļi ir absolūtā vērtība, tāpēc 100 pikseļi ir 100 pikseļi neatkarīgi no tā, kur jūsu dokumentā parādās kāds elements. Diemžēl, lai arī pikseļu vērtības ir viegli saprotamas, tās nedarbojas labi reaģējošās vietnēs.
Ītans Marcotte izdomāja šo terminu “Atsaucīgs tīmekļa dizains”, paskaidrojot, ka šī pieeja satur 3 galvenos principus:
- Šķidruma režģis
- Šķidrums
- Mediju vaicājumi
Šie pirmie divi punkti, šķidruma režģis un šķidruma vide tiek sasniegti, vērtību lielumam izmantojot pikseļu vietā procentus.
Procentu izmantošana platuma vērtībām
Kad elementa platuma noteikšanai izmantojat procentus, faktiskais elementa parādītais lielums mainīsies atkarībā no tā, kur tas atrodas dokumentā. Procenti ir relatīva vērtība, tas nozīmē, ka parādītais lielums ir salīdzināms ar citiem jūsu dokumenta elementiem.
Piemēram, ja iestatāt attēls līdz 50%, tas nenozīmē, ka attēls tiks parādīts uz pusi no tā parastā lieluma. Tas ir izplatīts nepareizs uzskats.
Ja attēla platums faktiski ir 600 pikseļi, tad CSS vērtības izmantošana, lai to parādītu ar 50%, nenozīmē, ka tīmekļa pārlūkprogrammā tā būs 300 pikseļu plata. Šī procentuālā vērtība tiek aprēķināta, pamatojoties uz elementu, kas satur šo attēlu, nevis uz paša attēla faktisko izmēru. Ja konteinera (kas varētu būt dalījums vai kāds cits HTML elements) platums ir 1000 pikseļi, attēls tiks attēlots ar 500 pikseļiem, jo šī vērtība ir 50% no konteinera platuma. Ja saturošā elementa platums ir 400 pikseļi, attēls tiks rādīts tikai ar 200 pikseļiem, jo šī vērtība ir 50% no konteinera. Šeit aplūkojamā attēla izmērs ir 50%, un tas ir pilnībā atkarīgs no elementa, kas to satur.
Atcerieties, ka atsaucīgais dizains ir plūstošs. Izkārtojumi un izmēri mainīsies kā mainās ekrāna izmērs / ierīce. Ja jūs domājat par to fiziskā, nevis tīmekļa izteiksmē, tas ir tāpat kā ar kartona kastīti, kuru jūs piepildāt ar iepakojuma materiālu. Ja jūs sakāt, ka kastītei jābūt pusei piepildītai ar šo materiālu, nepieciešamais iepakojuma daudzums mainīsies atkarībā no kastes lieluma. Tas pats attiecas uz procentuālo platumu tīmekļa dizainā.
Procenti, pamatojoties uz citiem procentiem
Attēla / konteinera piemērā mēs izmantojām pikseļu vērtības saturošajam elementam, lai parādītu, kā tiks parādīts atsaucīgais attēls. Patiesībā saturošais elements tiktu iestatīts arī kā procentuālais daudzums, un attēls vai citi elementi, kas atrodas šajā konteinerā, saņemtu vērtības, pamatojoties uz procentuālo daļu.
Šeit ir vēl viens piemērs.
Pieņemsim, ka jums ir vietne, kurā visa vietne ir iekļauta nodaļā ar “konteinera” klasi (izplatīta tīmekļa dizaina prakse). Šajā nodalījumā ir trīs citas sadaļas, kuras jūs galu galā veidosiet, lai attēlotu kā 3 vertikālas kolonnas.
Tagad varat izmantot CSS, lai iestatītu “konteinera” sadalījuma lielumu, lai tas būtu 90%. Šajā piemērā konteineru nodalījumam nav cita elementa, kas to ieskauj, izņemot ķermeni, kuru mēs neesam iestatījuši nevienai konkrētai vērtībai. Pēc noklusējuma pamatteksts tiek parādīts kā 100% no pārlūka loga. Tāpēc sadalījuma “konteiners” procentuālā daļa būs balstīta uz pārlūkprogrammas loga lielumu. Mainoties šī pārlūka loga lielumam, mainīsies arī šī “konteinera” lielums. Tātad, ja pārlūkprogrammas loga platums ir 2000 pikseļu, šis sadalījums tiks parādīts ar 1800 pikseļiem. To aprēķina kā 90 procentus no 2000. gada (2000 x, 90 = 1800)), kas ir pārlūka lielums.
Ja katra no “col” nodalījumiem, kas atrodami “konteinerā”, ir iestatīta uz 30%, tad šajā piemērā katra no tām būs 540 pikseļu plata. To aprēķina kā 30% no 1800 pikseļiem, kurus konteiners atveido (1800 x, 30 = 540). Ja mēs mainītu šī konteinera procentuālo daudzumu, arī šie iekšējie sadalījumi mainītos pēc izmēra, jo tie ir atkarīgi no šī konteinera elementa.
Pieņemsim, ka pārlūkprogrammas logi paliek 2000 pikseļu platumā, taču konteinera procentuālo vērtību mēs mainām uz 80%, nevis 90%. Tas nozīmē, ka tas tagad tiks attēlots ar 1600 pikseļu platumu (2000 x, 80 = 1600). Pat ja mēs nemainīsim CSS atbilstoši mūsu 3 “kol” nodaļu lielumam un atstāsim tos 30% apmērā, viņi tagad tiek atveidoti atšķirīgi, jo ir to saturošais elements, kas ir konteksts, pēc kura tie tiek izmērīti mainīts. Šie 3 sadalījumi tagad tiks attēloti kā 480 pikseļu plati, kas ir 30% no 1600 vai konteinera izmērs 1600 x, 30 = 480).
Ņemot to vērā vēl vairāk, ja vienā no šīm “kol” nodaļām būtu attēls un šī attēla lielums būtu noteikts procentos, konteksts tā lieluma noteikšanai būtu pats “kol”. Mainoties “kol” sadalījumam pēc izmēra, mainīsies arī attēls tajā. Tātad, ja mainīsies pārlūkprogrammas vai “konteinera” izmērs, tas ietekmēs trīs “col” sadalījumus, kas savukārt mainīt kolonnas iekšpusē esošā attēla izmēru Kā redzat, tie visi ir saistīti, kad runa ir par procentuālo lielumu vērtības.
Apsverot, kā web lapas iekšējais elements tiks atveidots, ja tā platumam tiek izmantota procentuālā vērtība, jums ir jāsaprot konteksts, kurā šis elements atrodas lapas marķējumā.
Kopsavilkumā
Procentiem ir izšķiroša loma adaptīvu vietņu izkārtojuma izveidē. Neatkarīgi no tā, vai attēlus pielāgojat reaģējoši vai izmantojat platuma procentus, lai izveidotu patiesi plūstošu režģi, kura izmēri ir savstarpēji saistīti, šo aprēķinu izpratne būs nepieciešama, lai sasniegtu izskatu vēlme.