Monilla reagoivan verkkosuunnittelun opiskelijoilla on vaikea käyttää prosenttiosuuksia leveysarvoihin. Erityisesti sekaannusta siitä, miten selain laskee nämä prosenttiosuudet. Alta löydät yksityiskohtaisen selvityksen siitä, kuinka prosenttiosuudet toimivat leveyden laskemisessa reagoivalla verkkosivustolla.
Pikselien käyttäminen leveysarvoihin
Kun käytät pikseliä leveysarvona tulokset ovat hyvin suoraviivaisia. Jos käytät CSS Jos haluat asettaa asiakirjan otsikossa olevan elementin leveyden arvoksi 100 pikseliä, kyseinen elementti on sama koko kuin se, jonka asetit 100 pikselin levyiseksi verkkosivuston sisällössä tai alatunnisteessa tai muilla sivun alueilla. Pikselit ovat absoluuttinen arvo, joten 100 pikseliä on 100 pikseliä riippumatta siitä, missä dokumentissa elementti esiintyy. Valitettavasti pikseliarvot on helppo ymmärtää, mutta ne eivät toimi hyvin reagoivien verkkosivustojen kanssa.
Ethan Marcotte loi termin "Reagoiva verkkosivujen suunnittelu", jossa selitetään tämä lähestymistapa sisältävän kolme keskeistä periaatetta:
- Nesteverkko
- Nestemäinen väliaine
- Mediakyselyt
Nämä kaksi ensimmäistä pistettä, nesteverkko ja nestemäinen väliaine saavutetaan käyttämällä prosenttiosuuksia pikselien sijaan arvojen mitoittamiseen.
Prosenttiosien käyttäminen leveysarvoille
Kun määrität elementtien leveyden prosenttiosuuksilla, elementin todellinen koko vaihtelee sen mukaan, missä se on asiakirjassa. Prosentit ovat suhteellinen arvo, eli näytetty koko on suhteessa muihin asiakirjan elementteihin.
Jos esimerkiksi asetat kuva 50%: iin, tämä ei tarkoita, että kuva näytetään puolet normaalista koostaan. Tämä on yleinen väärinkäsitys.
Jos kuva on tosiasiallisesti 600 pikseliä leveä, CSS-arvon käyttäminen sen näyttämiseen 50%: lla ei tarkoita, että se olisi 300 pikseliä leveä verkkoselaimessa. Tämä prosentuaalinen arvo lasketaan kyseisen kuvan sisältävän elementin perusteella, ei itse kuvan todellisen koon perusteella. Jos säilön (joka voi olla jako tai jokin muu HTML-elementti) leveys on 1000 pikseliä, kuvaa näytetään 500 pikselillä, koska arvo on 50% säilön leveydestä. Jos sisältävän elementin leveys on 400 pikseliä, kuvaa näytetään vain 200 pikselillä, koska arvo on 50% säilöstä. Kyseessä olevan kuvan koko on 50%, joka riippuu kokonaan sen sisältävästä elementistä.
Muista, että reagoiva suunnittelu on sujuvaa. Asettelut ja koot muuttuvat näytön koko / laite muuttuu. Jos ajattelet tätä fyysisellä, ei-web-termillä, se on kuin sinulla olisi pahvilaatikko, jonka täytät pakkausmateriaalilla. Jos sanot, että laatikon tulisi olla puoliksi täytetty kyseisellä materiaalilla, tarvitsemasi pakkauksen määrä vaihtelee laatikon koon mukaan. Sama pätee web-suunnittelun prosenttileveyksiin.
Prosentit perustuvat muihin prosentteihin
Kuva / säiliöesimerkissä käytimme sisältävän elementin pikseliarvoja osoittamaan, kuinka reagoiva kuva näytettäisiin. Todellisuudessa sisältävä elementti asetettaisiin myös prosentteina ja kuva tai muut elementit kyseisen säiliön sisällä saisivat arvonsa prosenttiosuuden perusteella.
Tässä on toinen esimerkki.
Oletetaan, että sinulla on verkkosivusto, jossa koko sivusto on jaossa luokkiin "säilö" (yleinen verkkosuunnittelukäytäntö). Tämän jaon sisällä on kolme muuta jakoa, jotka lopulta muotoilet näyttämään kolmella pystysarakkeella.
Voit nyt käyttää CSS: ää asettamaan kyseisen "kontti" jaon kooksi sanomaan 90%. Tässä esimerkissä konttijaolla ei ole muuta sitä ympäröivää elementtiä kuin runko, jota emme ole asettaneet mihinkään tiettyyn arvoon. Oletuksena runko renderoidaan 100% selainikkunasta. Siksi "säilö" -osion prosenttiosuus perustuu selainikkunan kokoon. Kun kyseisen selainikkunan koko muuttuu, muuttuu myös tämän "säilön" koko. Joten jos selainikkunan leveys on 2000 pikseliä, tämä jako näkyy 1800 pikselinä. Tämä lasketaan 90 prosenttina vuodesta 2000 (2000 x, 90 = 1800)), joka on selaimen koko.
Jos kukin “kontin” sisällä olevista ”col” -jakoista on asetettu kooltaan 30%, kukin niistä on tässä esimerkissä 540 pikseliä leveä. Tämä lasketaan 30 prosentiksi 1800 pikselistä, jonka säilö renderöi (1800 x, 30 = 540). Jos muuttaisimme kyseisen säiliön prosenttiosuutta, myös nämä sisäiset jakaumat muuttuisivat niiden tekemässä koossa, koska ne ovat riippuvaisia kyseisestä säiliöelementistä.
Oletetaan, että selainikkunat ovat 2000 pikseliä leveitä, mutta muutamme säilön prosenttiosuudeksi 80% 90%: n sijaan. Tämä tarkoittaa, että se hahmonnetaan nyt 1600 pikselin levyisenä (2000 x .80 = 1600). Vaikka emme muuttaakaan CSS: ää 3 "col" -jakaumamme koolle ja jätämme ne 30 prosenttiin, ne toistaa nyt eri tavalla, koska niiden sisältävällä elementillä, joka on konteksti, jonka mukaan ne ovat kooltaan, on muuttunut. Nämä 3 jakoa esitetään nyt 480 pikselin levyisinä, mikä on 30% 1600: sta tai säiliön koko 1600 x 0,30 = 480).
Ottaen tämän vielä pidemmälle, jos jossakin näistä ”col” -jakoista olisi kuva ja että kuva mitoitettaisiin prosentteina, sen mitoituskonteksti olisi itse ”col”. Kun ”col” -jako muuttui kooltaan, muuttuisi myös sen sisällä oleva kuva. Joten jos selaimen tai "säilön" koko muuttuisi, se vaikuttaisi kolmeen "col" -jakaumaan, mikä puolestaan muuta kuvan kokoa “col” -kohdassa Kuten näette, nämä kaikki ovat yhteydessä toisiinsa, kun on kyse prosenttivetoisesta koosta arvot.
Kun harkitset verkkosivun sisällä olevan elementin hahmontumista, kun sen leveydelle käytetään prosentuaalista arvoa, sinun on ymmärrettävä konteksti, jossa kyseinen elementti sijaitsee sivun merkinnöissä.
Yhteenvetona
Prosentteilla on kriittinen rooli reagoivien verkkosivustojen ulkoasun luomisessa. Halusitpa sitten mitoittaa kuvia reagoivasti vai käyttämällä prosenttileveyksiä, voit tehdä todella juoksevan ruudukon, jonka koot ovat suhteessa toisiinsa, näiden laskelmien ymmärtäminen on välttämätöntä ulkonäön saavuttamiseksi himoita.