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ų reikšmės yra lengvai suprantamos, jos netinkamai veikia su reaguojančiomis svetainėmis.
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ė yra 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 nustatote vaizdo pločiui 50%, tai ne reiš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 mes panaudojome elemento, kurio sudėtyje yra pikselių, reikšmes, kad parodytume, kaip bus rodomas jautrus vaizdas. Iš tiesų elementą turintis elementas taip pat bus nustatytas kaip procentinė dalis, o jo vaizdas arba kiti elementai tame konteineryje bus jų vertės, pagrįstos procentine procentine dalimi.
Š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 priklauso nuo to, kuriame yra elementas. 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 gali paveikti tris "col" skiltis, o tai savo ruožtu pakeis "col" dydžio vaizdą. Kaip matote, tai visi kai kalbama apie procentinio dydžio dydžio reikšmes. 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. Procentai atlieka svarbų vaidmenį kuriant išdėstymą jautrioms svetainėms. Nesvarbu, ar vaizdus reaguojate ar naudojate procentais, kad būtų sukurta tikrai skysčio tinklelis, kurio dydžiai yra vieni kitiems, suprasti šiuos skaičiavimus reikės norint pasiekti norimą išvaizdą. Apibendrinant
