Preberite, kako spletni brskalniki določijo prikaz s pomočjo odstotnih vrednosti
Mnogi študenti odzivnega spletnega oblikovanja imajo težek čas z uporabo odstotkov za širinske vrednosti. Natančneje, obstaja zmeda, kako brskalnik izračuna te odstotke. Spodaj boste našli podrobno razlago, kako odstotki delujejo pri izračunu širine na odzivni spletni strani.
Uporaba pikslov za širinske vrednosti
Če uporabite slikovne pike kot vrednost širine, so rezultati zelo preprosti. Če uporabljate CSS, če želite vrednost širine elementa v glavi dokumenta nastaviti na širino 100 slikovnih pik, bo ta element enak velikosti, kot ste jo nastavili na 100 slikovnih pik v vsebini ali nogi spletne strani ali na drugih področjih stran. Piksli so absolutna vrednost, zato je 100 slikovnih pik 100 pik, ne glede na to, kje v vašem dokumentu se prikaže element. Na žalost, medtem ko so vrednosti pikslov lahko razumljive, ne delujejo dobro na odzivnih spletnih mestih.
Ethan Marcotte je dal izraz "odzivno spletno oblikovanje", ki je opisal ta pristop in vseboval tri ključne principe:
- Tekoča mreža
- Tekoči mediji
- Medijske poizvedbe
Te prve dve točki, fluidno mrežo in fluidni mediji so dosežene z uporabo odstotkov, namesto pikslov, za velikostne vrednosti.
Uporaba odstotkov za širinske vrednosti
Ko uporabite odstotke za določitev širine elementa, se dejanska velikost tega elementa razlikuje glede na to, kje je v dokumentu. Odstotki so relativna vrednost, kar pomeni, da je prikazana velikost v primerjavi z drugimi elementi v vašem dokumentu.
Če na primer nastavite širino slike na 50%, to ne pomeni, da se bo slika prikazala na polovici običajne velikosti. To je pogosto napačno prepričanje.
Če je slika narativno 600 pik široka, potem z uporabo vrednosti CSS, da jo prikažete pri 50%, ne pomeni, da bo v spletnem brskalniku širok 300 pik. Ta odstotna vrednost se izračuna na podlagi elementa, ki vsebuje to sliko, in ne izvirne velikosti slike samega. Če je vsebnik (ki je lahko delitev ali kakšen drug element HTML) širok 1000 pik, bo slika prikazana na 500 pikslov, ker je ta vrednost 50% širine vsebnika. Če je vsebujoči element širok 400 slikovnih pik, se slika prikaže samo pri 200 slikovnih pik, ker je ta vrednost 50% vsebnika. Zadevna slika ima 50-odstotno velikost, ki je popolnoma odvisna od elementa, ki ga vsebuje.
Ne pozabite, da je odzivna oblika fluidna. Postavitve in velikosti se bodo spremenile, ko se velikost zaslona / naprava spremeni . Če razmišljate o tem v fizičnih, ne-spletnih izrazih, je to, da imate kartonsko škatlo, ki jo napolnite z embalažnim materialom. Če pravite, da je polje polno napolnjeno s tem materialom, se količina pakiranja, ki jo potrebujete, razlikuje glede na velikost škatle. Enako velja za odstotne širine v spletnem oblikovanju.
Odstotki, ki temeljijo na drugih odstotkih
V primeru slike / posode sem uporabil vrednosti pikslov za vsebujoče elemente, da bi pokazal, kako bi se odzivala slika prikazala. V resnici bi bil vsebujoči element nastavljen tudi na odstotek, slika ali drugi elementi v tem vsebniku pa bi dobili svoje vrednosti na podlagi odstotka odstotka.
Tukaj je še en primer, ki to kaže v praksi.
Recite, da imate spletno mesto, na katerem je celotno spletno mesto razdeljeno v razred "vsebnika" (skupna praksa spletnega oblikovanja). V tej delitvi so tri druge razdelke, ki jih boste sčasoma prikazali kot 3 navpične stolpce. Ta HTML je lahko takšen:
Zdaj lahko CSS uporabite za določitev velikosti te razdelke za zabojnike, če želite povedati 90%. V tem primeru razdelek kontejnerjev nima drugega elementa, ki ga obdaja, razen telesa, za katerega nismo nastavili nobene posebne vrednosti. Telo bo privzeto postavilo kot 100% okna brskalnika. Zato bo odstotek "zabojnika" temeljil na velikosti okna brskalnika. Ker se to okno brskalnika spreminja v velikosti, bo tudi velikost tega "vsebnika". Torej, če je okno brskalnika široko 2000 slikovnih pik, se ta razdelek prikaže na 1800 slikovnih pik. To se izračuna kot 90-odstotni delež v letu 2000 (2000 x .90 = 1800)), kar je velikost brskalnika.
Če je vsaka od "razdelkov", najdenih v "vsebniku", nastavljena na velikost 30%, potem bo vsaka od njih v tem primeru širina 540 pik. To se izračuna kot 30% od 1800 pikslov, ki jih posoda prikaže (1800 x .30 = 540). Če smo spremenili odstotek tega vsebnika, bi se te notranje delitve spremenile tudi v velikosti, na kateri so prikazane, ker so odvisne od tistega, ki vsebuje element.
Predpostavimo, da ostane okno brskalnika široko 2000 pik, spremenimo pa odstotek vrednosti vsebnika na 80% namesto 90%. To pomeni, da bo sedaj na širino 1600 pikslov (2000 x .80 = 1600). Tudi če CSS ne bomo spremenili glede na velikost naših 3-colnih razdelkov in jih pustili na 30%, bodo zdaj različno prikazani, ker se je spremenil njihov vsebinski element, ki ga spreminjajo. Te 3 divizije bodo zdaj postale širše kot 480 pik, kar je 30% 1600 ali velikost posode (1600 x 30 = 480).
Če to še dodatno upoštevamo, če bi bila slika znotraj ene od teh "kol" delitev in da je bila slika določena z odstotkom, bi bil kontekst za njegovo velikost "kol" sam. Ker se je ta "kol" delitev spremenila v velikosti, bi tudi slika v njej. Torej, če se velikost brskalnika ali "vsebnika" spremeni, bi to vplivalo na tri "kol" delitve, kar bi spremenilo velikost slike v "col." Kot lahko vidite, so ti vsi povezani, ko gre za procentualne velikostne vrednosti.
Ko razmislite o tem, kako bo element znotraj spletnega mesta prikazal, če se za njegovo širino uporabi odstotna vrednost, morate razumeti kontekst, v katerem ta element nahaja v oznaki strani.
V povzetku
Odstotki igrajo ključno vlogo pri ustvarjanju postavitve za odzivne spletne strani . Ne glede na to, ali slike prilagodite razmeroma ali uporabljate odstotek širine, da bi postali resnično fluidna mreža, katere velikosti so relativne med seboj, bo razumevanje teh izračunov potrebno za doseganje videza, ki ga želite.