Daugeliui interaktyvaus interneto dizaino studentų sunku naudoti pločio reikšmių procentus. Tiksliau, yra painiavos su tuo, kaip naršyklė apskaičiuoja tuos procentus. Žemiau rasite išsamų paaiškinimą, kaip procentai veikia skaičiuojant interaktyvią svetainę.
Pikselių naudojimas pločio vertėms
Kai naudosite pikselių kaip pločio reikšmė, rezultatai yra labai paprasti. Jei naudosite CSS Norėdami nustatyti dokumento antraštės elemento pločio vertę iki 100 pikselių pločio, tas elementas bus tokio pat dydžio, kokį nustatote 100 pikselių pločio svetainės turinyje, poraštėje ar kitose puslapio vietose. Pikseliai yra absoliuti vertė, todėl 100 pikselių yra 100 pikselių, nesvarbu, kur jūsų dokumente yra elementas. Deja, nors pikselių vertės yra lengvai suprantamos, jos veikia blogai reaguojančiose svetainėse.
Ethanas Marcotte'as sugalvojo šį terminą „Reaguojantis interneto dizainas“, paaiškinantis, kad šis požiūris apima 3 pagrindinius principus:
- Skysčių tinklelis
- Skysta terpė
- Žiniasklaidos užklausos
Šie pirmieji du taškai, skysčio tinklelis ir skysčio terpė, pasiekiami naudojant dydžius, o ne taškus, o procentus.
Procentų naudojimas pločio vertėms
Kai naudojate procentus norėdami nustatyti elemento plotį, tikrasis elemento rodomas dydis skirsis priklausomai nuo dokumento vietos. Procentai yra santykinė vertė, o tai reiškia, kad rodomas dydis yra palyginti su kitais jūsų dokumento elementais.
Pvz., Jei nustatote vaizdas iki 50%, tai nereiškia, kad vaizdas bus rodomas perpus mažesniu nei įprastas dydis. Tai paplitusi klaidinga nuomonė.
Jei vaizdas iš tikrųjų yra 600 taškų pločio, tai naudojant CSS vertę, kad jis būtų rodomas 50%, dar nereiškia, kad jis bus 300 taškų pločio žiniatinklio naršyklėje. Ši procentinė vertė apskaičiuojama pagal elementą, kuriame yra tas vaizdas, o ne pagal tikrąjį paties vaizdo dydį. Jei sudėtinio rodinio (kuris gali būti padalinys ar kitas HTML elementas) plotis yra 1000 pikselių, vaizdas bus rodomas 500 taškų, nes ši vertė yra 50% talpyklos pločio. Jei elemento yra 400 taškų pločio, vaizdas bus rodomas tik 200 taškų, nes ši vertė yra 50% talpyklos. Aptariamas vaizdas yra 50% dydžio, kuris visiškai priklauso nuo elemento, kuriame jis yra.
Atminkite, kad reaguojantis dizainas yra sklandus. Išdėstymai ir dydžiai keisis kaip ekrano dydis / įrenginio pakeitimai. Jei galvojate apie tai fiziškai, ne žiniatinklyje, tai yra tarsi kartoninė dėžutė, kurią užpildote pakavimo medžiaga. Jei sakote, kad dėžutė turėtų būti pusiau užpildyta ta medžiaga, jums reikalingos pakuotės kiekis priklausys nuo dėžutės dydžio. Tas pats pasakytina apie procentinį pločio dizainą.
Procentai pagal kitus procentus
Vaizdo / sudėtinio rodinio pavyzdyje mes panaudojome elemento, kuriame yra elemento, taškų reikšmes, kad parodytume, kaip bus rodomas reaguojantis vaizdas. Iš tikrųjų elementas, kuriame yra elemento, taip pat būtų nustatytas kaip procentas, o vaizdas ar kiti elementai, esantys toje talpykloje, gautų savo vertes pagal procentų procentą.
Štai dar vienas pavyzdys.
Tarkime, kad turite svetainę, kurioje visa svetainė yra skyriuje su „konteinerio“ klase (įprasta interneto dizaino praktika). Šio skyriaus viduje yra dar trys padaliniai, kuriuos galiausiai sukursite stilių rodydami kaip 3 vertikalius stulpelius.
Dabar galite naudoti CSS, kad nustatytumėte „konteinerio“ padalinio dydį, t. Y. 90%. Šiame pavyzdyje konteinerių skyriuje nėra kito jį supančio elemento, išskyrus kūną, kurio mes nenustatėme jokios konkrečios vertės. Pagal numatytuosius nustatymus turinys bus pateiktas kaip 100% naršyklės lango. Todėl „konteinerio“ padalijimo procentas bus pagrįstas naršyklės lango dydžiu. Keičiantis naršyklės langui, pasikeis ir šio „konteinerio“ dydis. Taigi, jei naršyklės langas yra 2000 taškų pločio, šis padalijimas bus rodomas 1800 taškų. Tai apskaičiuojama kaip 90 procentų 2000 m. (2000 x, 90 = 1800)), tai yra naršyklės dydis.
Jei kiekvienas iš „col“ skyrių, esančių „konteineryje“, bus nustatytas 30% dydžio, šiame pavyzdyje kiekvienas jų bus 540 taškų pločio. Tai apskaičiuojama kaip 30% 1800 taškų, kuriuos sudėtinis rodinys pateikia (1800 x, 30 = 540). Jei pakeistume to konteinerio procentą, šie vidiniai skyriai taip pat pasikeistų jų teikiamo dydžio, nes jie priklauso nuo to konteinerio elemento.
Tarkime, kad naršyklės langai lieka 2000 taškų pločio, tačiau procentinę konteinerio vertę pakeičiame į 80%, o ne į 90%. Tai reiškia, kad dabar jis bus pateiktas 1600 taškų pločio (2000 x .80 = 1600). Net jei nekeisime CSS pagal 3 „col“ padalinių dydį ir paliksime juos 30%, jie atvaizduoti dabar kitaip, nes jų turintis elementas yra kontekstas, pagal kurį jie yra dydžio pasikeitė. Šie 3 padalijimai dabar bus pateikiami po 480 taškų pločio, tai yra 30% 1600 arba konteinerio dydis 1600 x, 30 = 480).
Atsižvelgiant į tai dar labiau, jei viename iš šių „col“ padalinių būtų vaizdas ir tas vaizdas būtų nustatytas procentais, jo dydžio kontekstas būtų pats „col“. Keičiantis „col“ padaliniui, pasikeitė vaizdas jo viduje. Taigi, jei pasikeis naršyklės arba „konteinerio“ dydis, tai paveiks tris „col“ skyrius, kurie savo ruožtu pakeisti „col“ viduje esančio vaizdo dydį Kaip matote, visa tai yra susiję, kai kalbama apie procentinį dydį vertybes.
Kai svarstote, kaip bus atvaizduojamas tinklalapio elementas, kai procentinė jo pločio vertė bus naudojama, turite suprasti kontekstą, kuriame tas elementas yra puslapio žymėjime.
Apibendrinant
Procentai vaidina svarbų vaidmenį kuriant reaguojančių svetainių maketą. Nesvarbu, ar greitai keičiate vaizdus, ar naudojate procentinius pločius, kad sudarytumėte tikrai sklandų tinklelį, kurio dydžiai yra santykinai vienas su kitu, norint suprasti tokį išvaizdą, reikės suprasti šiuos skaičiavimus noras.