Številni študentje odzivnega spletnega oblikovanja težko uporabljajo odstotke za vrednosti širine. Natančneje, prihaja do zmede pri tem, kako brskalnik izračuna te odstotke. Spodaj najdete podrobno razlago, kako odstotki delujejo pri izračunih širine na odzivnem spletnem mestu.
Uporaba slikovnih pik za vrednosti širine
Ko uporabljate slikovnih pik kot vrednost širine so rezultati zelo enostavni. Če uporabljate CSS če želite nastaviti vrednost širine elementa v glavi dokumenta na 100 slikovnih pik, bo ta element enake velikosti kot ena, ki ste jo v vsebini ali nogi ali drugih delih strani nastavili na 100 slikovnih pik. Piksli so absolutna vrednost, zato je 100 pik 100 pik, ne glede na to, kje v dokumentu se pojavi element. Na žalost so vrednosti slikovnih pik sicer lahko razumljive, vendar z odzivnimi spletnimi mesti ne delujejo dobro.
Izraz je skoval Ethan Marcotte "Odzivno spletno oblikovanje", ki pojasnjuje, da ta pristop vsebuje tri ključne principe:
- Tekoča mreža
- Tekoči mediji
- Medijska vprašanja
Ti prvi dve točki, fluidna mreža in fluidni medij se dosežejo z uporabo odstotkov za namestitev vrednosti namesto pik.
Uporaba odstotkov za vrednosti širine
Ko z odstotki določite širino elementa, se dejanska velikost elementa razlikuje, odvisno od tega, kje je v dokumentu. Odstotki so relativna vrednost, kar pomeni, da je prikazana velikost sorazmerna z drugimi elementi v dokumentu.
Če na primer nastavite širino datoteke slike do 50%, to ne pomeni, da bo slika prikazana na polovici svoje običajne velikosti. To je pogosta napačna predstava.
Če je slika dejansko široka 600 slikovnih pik, potem uporaba vrednosti CSS za prikaz 50% ne pomeni, da bo v spletnem brskalniku široka 300 slikovnih pik. Ta odstotna vrednost se izračuna na podlagi elementa, ki vsebuje to sliko, in ne dejanske velikosti same slike. Če je vsebnik (ki je lahko delitev ali kakšen drug element HTML) širok 1000 slikovnih pik, bo slika prikazana s 500 slikovnimi pikami, saj je ta vrednost 50% širine vsebnika. Če je element, ki vsebuje element, širok 400 slikovnih pik, bo slika prikazana le pri 200 slikovnih pikah, saj je ta vrednost 50% vsebnika. Zadevna slika ima 50% velikost, ki je popolnoma odvisna od elementa, ki jo vsebuje.
Ne pozabite, odziven dizajn je tekoč. Postavitve in velikosti se bodo spreminjale kot velikost zaslona / spremembe naprave. Če o tem razmišljate fizično, ne v spletu, je to kot bi imeli kartonsko škatlo, ki jo napolnite z embalažo. Če pravite, da je treba škatlo do polovice napolniti s tem materialom, se količina embalaže razlikuje, odvisno od velikosti škatle. Enako velja za odstotne širine pri spletnem oblikovanju.
Odstotki na podlagi drugih odstotkov
V primeru slike / vsebnika smo uporabili vrednosti slikovnih pik za element, ki vsebuje, da pokažemo, kako bi se odzivna slika prikazala. V resnici bi bil element, ki ga vsebuje, nastavljen tudi kot odstotek, slika ali drugi elementi znotraj tega vsebnika pa bi dobili svoje vrednosti glede na odstotek v odstotkih.
Tu je še en primer.
Recimo, da imate spletno mesto, kjer je celotno spletno mesto znotraj oddelka s razredom "vsebnik" (običajna praksa spletnega oblikovanja). Znotraj tega oddelka so trije drugi odseki, ki jih boste sčasoma oblikovali za prikaz v obliki 3 navpičnih stolpcev.
Zdaj lahko s pomočjo CSS nastavite velikost tega odseka "vsebnik" na 90%. V tem primeru oddelek vsebnika nima drugega elementa, ki ga obkroža, razen telesa, ki ga nismo nastavili na nobeno določeno vrednost. Privzeto bo telo upodobljeno kot 100% okna brskalnika. Zato bo odstotek oddelka "vsebnik" temeljil na velikosti okna brskalnika. S spreminjanjem velikosti okna brskalnika se spreminja tudi velikost tega "vsebnika". Torej, če je okno brskalnika široko 2000 slikovnih pik, bo ta del prikazan na 1800 slikovnih pik. To se izračuna kot 90 odstotkov leta 2000 (2000 x, 90 = 1800)), kar je velikost brskalnika.
Če je vsaka od oddelkov "col", ki jo najdete v "vsebniku", nastavljena na velikost 30%, bo v tem primeru vsaka od njih široka 540 slikovnih pik. To se izračuna kot 30% od 1800 slikovnih pik, ki jih posoda upodobi (1800 x .30 = 540). Če bi spremenili odstotek tega vsebnika, bi se te notranje delitve spremenile tudi v velikosti, ki jo upodabljajo, saj so odvisne od tega elementa vsebnika.
Predpostavimo, da okna brskalnika ostajajo široka 2000 slikovnih pik, vendar spremenimo odstotno vrednost vsebnika na 80% namesto na 90%. To pomeni, da bo zdaj upodabljal s 1600 slikovnimi pikami (2000 x, 80 = 1600). Tudi če CSS-ja ne spremenimo za velikost naših 3 oddelkov "col" in jim pustimo 30%, bodo zdaj upodabljajo drugače, saj ima njihov vsebujoči element, to je kontekst, po katerem so velikosti spremenila. Te tri divizije bodo zdaj upodabljale po 480 slikovnih pik, kar je 30% od 1600 ali velikost posode 1600 x .30 = 480).
Če pogledamo še dlje, če bi bila slika v eni od teh oddelkov "col" in bi bila ta slika določena v odstotkih, bi bil kontekst za njeno velikost sam "col". Ko se je velikost oddelka "col" spremenila, bi se spremenila tudi slika v njej. Torej, če bi se velikost brskalnika ali "vsebnika" spremenila, bi to vplivalo na tri oddelke "col", kar bi posledično spremenite velikost slike znotraj "col." Kot lahko vidite, so ti vsi povezani, ko gre za velikost na podlagi odstotka vrednote.
Ko upoštevate, kako se bo prikazal element znotraj spletne strani, ko bo za njegovo širino uporabljena odstotna vrednost, morate razumeti kontekst, v katerem je ta element v oznakah strani.
V povzetku
Odstotki igrajo ključno vlogo pri ustvarjanju postavitve za odzivna spletna mesta. Ne glede na to, ali slike odzivate veliko ali uporabljate odstotne širine, da ustvarite resnično tekočo mrežo, katere velikosti so sorazmerni drug drugemu, za razumevanje teh izračunov boste potrebovali svoj videz želja.