Sužinokite, kaip žiniatinklio naršyklės nustato ekraną naudojant procentines vertes
Daugumai jautrios interneto dizaino studentų sudėtinga naudoti procentinius pločio vertes. Konkrečiai kalbant, yra painiavos dėl to, kaip naršyklė apskaičiuoja tuos procentus. Žemiau rasite išsamų paaiškinimą, kaip procentai veikia pločio skaičiavimus jautrioje svetainėje.
Pikelių naudojimas pločio vertėms
Kai naudojate pikselius kaip pločio reikšmę, rezultatai yra labai paprasti. Jei naudojate CSS, norėdami nustatyti dokumento antraštėje esančio elemento pločio reikšmę iki 100 pikselių pločio, tas elementas bus tokio paties dydžio kaip ir tas, kurį nustatėte iki 100 pikselių pločio tinklalapio turinio arba podėlio ar kitų sričių puslapis Pikseliai yra absoliuti vertė, taigi 100 pikselių yra 100 pikselių, nesvarbu, kur jūsų dokumente atsiranda elementas. Deja, nors pikselių vertes yra lengva suprasti, jie veikia netinkamai tinkančiose svetainėse.
Ethan Marcotte sukūrė sąvoką "jautrus interneto dizainas", paaiškindamas, kad šis metodas apima 3 pagrindinius principus:
- Skysčio tinklelis
- Skysčių terpės
- Žiniasklaidos užklausos
Šie pirmieji du taškai, skysčių tinklelis ir skysčių terpės, pasiekiami naudojant procentinius dydžius, o ne pikselius.
Procentų naudojimas pločio vertėms
Kai naudojate procentus, kad nustatytumėte elemento plotį, faktinis šio elemento dydis gali skirtis priklausomai nuo to, kur jis yra dokumente. Procentai yra santykinė vertė, tai reiškia, kad dydis rodomas palyginus su kitais dokumento elementais.
Pavyzdžiui, jei nustatysite 50% pločio vaizdą , tai nereiškia, kad vaizdas bus rodomas pusėje jo normalaus dydžio. Tai dažnas klaidingas supratimas.
Jei vaizdas iš esmės yra 600 pikselių pločio, naudojant CSS vertę, kad jis būtų rodomas 50%, nereiškia, kad žiniatinklio naršyklėje jis bus 300 pikselių. Ši procentinė vertė apskaičiuojama atsižvelgiant į elementą, kuriame yra tas vaizdas, o ne į natūralų paties vaizdo dydį. Jei konteineris (kuris gali būti padalijimas ar kitas HTML elementas) yra 1000 pikselių pločio, vaizdas bus rodomas 500 pikselių, nes ši vertė yra 50% konteinerio pločio. Jei sudėtyje esantis elementas yra 400 pikselių pločio, vaizdas bus rodomas tik 200 pikselių, nes ši vertė yra 50% talpyklos. Čia nagrinėjamas vaizdas yra 50% dydžio, kuris visiškai priklauso nuo elemento, kuriame jis yra.
Atminkite, kad jautrus dizainas yra skystis. Išvaizda ir dydžiai keisis, kai keičiasi ekrano dydis / įrenginys . Jei apie tai galvojate fizinėmis, ne žiniatinklio sąlygomis, tai panašu į kartoninę dėžutę, kurią užpildote pakavimo medžiaga. Jei sakote, kad langelis turėtų būti užpildytas šia medžiaga, pakuotės kiekis, kuris jums reikalingas, priklausys nuo dėžutės dydžio. Tas pats pasakytina ir apie interneto dizaino plotą.
Procentai, pagrįsti kitais procentais
Paveikslės / talpyklės pavyzdyje aš naudoju elemento elemento pikselių reikšmes, rodydamas, kaip bus rodomas jautrus vaizdas. Iš tiesų elementą turintis elementas taip pat būtų nustatytas procentais, o jo talpykloje esantis vaizdas ar kiti elementai gautų jų vertes pagal procentinę procentinę dalį.
Štai dar vienas pavyzdys, kuris tai rodo praktikoje.
Pasakykite, kad turite svetainę, kurioje visa svetainė yra skyriuje su klasės "konteineris" (bendra interneto dizaino praktika). Šio skyriaus viduje yra trys kiti skyriai, kuriuos galų gale galėsite parodyti kaip 3 vertikalius stulpelius. Tas HTML gali atrodyti taip:
Dabar galite naudoti CSS, norėdami nustatyti "konteinerio" skyriaus dydį, kad pasakytumėte 90%. Šiame pavyzdyje konteinerių skyriuje nėra kito jo esančio elemento, išskyrus kūną, kurio nenustatėme jokios konkrečios vertės. Pagal numatytuosius nustatymus kūnas bus rodomas kaip 100% naršyklės lango. Todėl "konteinerio" skyriaus procentinė dalis bus grindžiama naršyklės lango dydžiu. Kadangi šis naršyklės langas pasikeičia dydžiu, taip bus ir šio "konteinerio" dydis. Taigi, jei naršyklės langas yra 2000 pikselių pločio, šis skyrius bus rodomas 1800 pikselių. Tai apskaičiuojama kaip 90 procentų 2000 (2000 x .90 = 1800)), kuris yra naršyklės dydis.
Jei kiekviename "konteinerio" skyriuje esančiame "col" skyriuje yra nustatytas 30% dydis, šiame pavyzdyje kiekvienas iš jų bus 540 pikselių pločio. Tai apskaičiuojama kaip 30% 1800 pikselių, kuriuos konteineris pateikia (1800 x .30 = 540). Jei mes pakeitėme šio konteinerio procentą, šie vidiniai padaliniai taip pat pasikeistų dydžiu, kurį jie atlieka, nes jie yra priklausomi nuo to elemento.
Daroma prielaida, kad naršyklės langai išlieka 2000 pikselių pločio, bet pakeičiame konteinerio procentinę vertę 80% vietoj 90%. Tai reiškia, kad dabar ji bus 1600 pikselių pločio (2000 x .80 = 1600). Net jei mes nekeisime 3S colių dydžio CSS ir palikime juos 30%, dabar jie bus skirtingi, nes jų elementas, kurio kontekstas yra jų dydis, pasikeitė. Šie 3 skyriai dabar bus 480 pikselių pločio, tai yra 30% iš 1600 arba konteineris (1600 x .30 = 480).
Darant tai dar labiau, jei viename iš šių "col" skyrių buvo vaizdas, o šis vaizdas buvo išreikštas procentais, jo dydžio kontekstas būtų pats "col". Kadangi šis "col" padalinys pasikeitė, taip pat vaizdas būtų jo viduje. Taigi, jei pakeista naršyklės arba "konteinerio" dydis, tai paveiktų tris "col" skiltis, o tai savo ruožtu pakeistų vaizdo dydį "col.". Kaip matote, visi jie yra prijungti, kai tai priklauso nuo procentinių dydžių dydžių.
Kai apsvarstysite, kaip vidiniame tinklalapyje esantis elementas bus naudojamas, kai jo pločiui bus naudojama procentinė reikšmė, turite suprasti kontekstą, kuriame šis elementas yra puslapio žymėjime.
Apibendrinant
Procentai atlieka svarbų vaidmenį kuriant išdėstymą jautrioms svetainėms . Nesvarbu, ar reaguoja vaizdus ar naudojate procentinius pločius, kad būtų sukurta tikrai skysčio tinklelis, kurio dydžiai yra vienas nuo kito, suprasti šiuos skaičiavimus bus būtina norint pasiekti norimą išvaizdą.