Uzziniet, kā tīmekļa pārlūkprogrammas nosaka displeju, izmantojot procentuālās vērtības
Daudziem adaptīvā tīmekļa dizaina studentiem ir grūti, izmantojot procentuālās vērtības platuma vērtībām. Konkrēti, pastāv neskaidrības par to, kā pārlūkprogramma aprēķina šos procentus. Zemāk jūs atradīsiet detalizētu skaidrojumu par to, kā procenti strādā pie platuma aprēķiniem reaģējošā vietnē.
Pikseļu izmantošana platuma vērtībām
Ja jūs izmantojat pikseļus kā platuma vērtību, rezultāti ir ļoti vienkārši. Ja jūs izmantojat CSS, lai dokumenta galvenē iestatītu elementa platuma vērtību 100 pikseļu platumam, šis elements būs tāda paša izmēra kā tas, kuru jūs iestatījāt 100 pikseļu platumā tīmekļa vietnes saturā vai kājenē vai citās vietās lappuse. Pikseļi ir absolūti lieli, tāpēc 100 pikseļi ir 100 pikseļi neatkarīgi no tā, kur jūsu dokumentā parādās elements. Diemžēl, lai gan pikseļu vērtības ir viegli saprotamas, tās nedarbojas pareizi vietnēs.
Ethan Marcotte ieviesa terminu "atsaucīgs web dizains", skaidrojot šo pieeju, kurā ir trīs galvenie principi:
- Šķidruma tīkls
- Šķidrums
- Mediju vaicājumi
Šie divi pirmie punkti, šķidruma režģis un šķidrums, tiek sasniegti, izmantojot izmēru lieluma noteikšanai procentus, nevis pikseļus.
Procentu pielietojums platuma vērtībām
Ja elementam tiek noteikts platums, izmantojiet procentus, faktiskais šī elementa izmērs tiks mainīts atkarībā no tā, kur tas atrodas dokumentā. Procenti ir relatīvā vērtība, kas nozīmē, ka izmērs ir lielāks nekā citiem jūsu dokumenta elementiem.
Piemēram, ja attēla platums ir iestatīts uz 50%, tas nenozīmē, ka attēls būs redzams pusi no tā normālā lieluma. Tas ir izplatīts nepareizs priekšstats.
Ja attēls sākotnēji ir 600 pikseļi plata, tad, izmantojot CSS vērtību, lai to parādītu 50% apmērā, nenozīmē, ka tīmekļa pārlūkprogrammā tas būs 300 pikseļi. Šī procentuālā vērtība tiek aprēķināta, pamatojoties uz elementu, kas satur šo attēlu, nevis paša attēla vietējo lielumu. Ja tvertne (kas varētu būt sadalīšana vai kāds cits HTML elements) ir 1000 pikseļu platums, attēls tiks parādīts ar 500 pikseļiem, jo šī vērtība ir 50% no konteinera platuma. Ja saturs ir 400 pikseļu platums, attēls tiks parādīts tikai 200 pikseļi, jo šī vērtība ir 50% no konteinera. Šeit aplūkojamajam attēlam ir 50% izmērs, kas pilnībā atkarīgs no elementa, kurā tas atrodas.
Atcerieties, ka atsaucīgs dizains ir šķidrums. Izkārtojumi un izmēri mainīsies, mainoties ekrāna izmēram / ierīcei . Ja jūs domājat par to fiziski, nevis ar tīmekļa noteikumiem, tā ir tā, ka jums ir kartona kārba, kuru aizpilda ar iepakojuma materiālu. Ja jūs sakāt, ka kastīte ir jāaizpilda ar šo materiālu, iepakojuma daudzums, kas jums nepieciešams, būs atkarīgs no kastes lieluma. Tas pats attiecas uz procentuālās platības web dizains.
Procentos, pamatojoties uz citiem procentiem
Attēla / konteinera piemērā es izmantoju elementa elementu pikseļu vērtības, lai parādītu, kā reaģējošais attēls tiks parādīts. Patiesībā, saturošā elementa vērtība tiek iestatīta arī procentos, un tēls vai citi elementi no šī konteinera saņemtu to vērtības, pamatojoties uz procentuālo daļu procentos.
Šis ir vēl viens piemērs, kas parāda to praksē.
Pieņemsim, ka jums ir vietne, kurā visa vietne atrodas nodaļā ar klasi "konteiners" (kopēja tīmekļa dizaina prakse). Šīs nodaļas iekšpusē ir trīs citas nodaļas, kuras jūs galu galā varēsiet parādīt kā 3 vertikālās kolonnas. Šis HTML var izskatīties šādi:
Tagad jūs varat izmantot CSS, lai iestatītu šī konteinera sadalījuma lielumu, lai teiktu 90%. Šajā piemērā konteineru nodaļai nav citas sastāvdaļas, kas to ieskauj, izņemot ķermeni, un mēs neesam iestatījuši kādu konkrētu vērtību. Pēc noklusējuma iestāde atveidos 100% pārlūkprogrammas logu. Tādēļ "konteinera" nodaļas procentuālais daudzums būs atkarīgs no pārlūkprogrammas loga lieluma. Tā kā šis pārlūka logs mainās pēc lieluma, tā būs arī šī "konteinera" lielums. Tātad, ja pārlūkprogrammas logs ir 2000 pikseļu platums, šis sadalījums būs redzams 1800 pikseļos. Tas tiek aprēķināts kā 90 procenti no 2000 (2000 x .90 = 1800)), kas ir pārlūka izmērs.
Ja katrai "konteinera" daļai atrastajai kolonnas vienībai ir iestatīts lielums 30%, katram no tiem šajā piemērā būs 540 pikseļi. Tas tiek aprēķināts kā 30% no 1800 pikseļu lieluma, ko konteinera vērtība ir (1800 x .30 = 540). Ja mainīsim šī konteinera procentuālo daudzumu, arī šie iekšējie sadalījumi mainīsies arī to izmēra dēļ, ko tie rada, jo tie ir atkarīgi no tā, kas satur elementu.
Pieņemsim, ka pārlūkprogrammas logi paliek 2000 pikseļu platumā, bet mēs mainām konteinera procentuālo vērtību līdz 80%, nevis 90%. Tas nozīmē, ka tagad tas atveidosies 1600 pikseļu platumā (2000 x .80 = 1600). Pat ja mēs nemainīsim CSS izmēru mūsu 3 collu sadalījumam un atstāsim tos 30% apmērā, tie tagad attieksies atšķirīgi, jo to saturs, kas ir konteksts, kurā tie tiek izlikti, ir mainījies. Šīs trīs nodaļas tagad būs 480 pikseļi plata katra, kas ir 30% no 1600 vai konteinera lielums (1600 x .30 = 480).
Ņemot to vēl tālāk, ja kādā no šīm "col" daļām būtu kāds attēls, un šis attēls tika izmērīts, izmantojot procentus, tās izmēra konteksts būtu pati "col". Tā kā šī "kola" nodaļa mainījās pēc lieluma, tā arī attēls tajā būtu redzams. Tātad, ja pārlūkprogrammas vai "konteinera" izmērs mainīsies, tas ietekmēs trīs "col" sadalījumus, kas savukārt mainītu attēla izmēru "kolā". Kā redzat, tie visi ir savienoti, kad runa ir par procentuāli orientētām lieluma vērtībām.
Kad jūs domājat, kā tīmekļa lapas elements tiks padarīts, ja tā platumam tiek izmantota procentuālā vērtība, jums jāsaprot konteksts, kurā šis elements atrodas lapas atzīmēšanā.
Kopsavilkumā
Procentos ir izšķiroša loma pielāgoto vietņu izkārtojuma izveidē. Neatkarīgi no tā, vai jūs attēlus izmēru reaģējat vai izmantojat procentuālo platumu, lai izveidotu patiesi šķidru tīklu, kura izmēri ir savstarpēji salīdzināmi, izpratne par šiem aprēķiniem būs vajadzīga, lai sasniegtu vēlamo izskatu.