Skip to content

Kuinka prosenttiosuudet toimivat leveyden laskemisessa reagoivalla verkkosivustolla

22 de kesäkuu de 2021

Monilla reagoivan verkkosuunnittelun opiskelijoilla on vaikeuksia 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 pikseleitä leveysarvona, tulokset ovat hyvin suoraviivaisia. Jos asetat CSS: n avulla asiakirjan otsikossa olevan elementin leveyden arvoksi 100 pikseliä, kyseinen elementti on saman kokoinen kuin 100 pikselin leveys verkkosivuston sisällössä tai alatunnisteessa tai muilla sivu. 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 web-suunnittelu”, selittäen tämän lähestymistavan sisältävän kolme avainta:

  1. Nesteverkko
  2. Nestemäinen väliaine
  3. Mediakyselyt

Nämä kaksi ensimmäistä pistettä, nesteverkko ja nestemäinen väliaine saavutetaan käyttämällä prosenttiosuuksia pikselien sijaan arvojen mitoittamiseen.

Prosenttiosuuksien käyttäminen leveysarvoille

Kun määrität elementin leveyden prosenttiosuuksien avulla, elementin todellinen koko vaihtelee asiakirjassa olevan sijainnin mukaan. Prosentit ovat suhteellinen arvo, eli näytetty koko on suhteessa muihin asiakirjan elementteihin. Jos esimerkiksi asetat kuvan leveydeksi 50%, se ei ole tarkoittaa, että kuva näkyy 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 on 300 pikseliä leveä verkkoselaimessa. Tämä prosenttiosuus lasketaan kuvan sisältävän elementin perusteella, ei itse kuvan todellisen koon perusteella. Jos säiliö (joka voi olla jako tai jokin muu HTML-elementti) on 1000 pikseliä leveä, kuva näytetään 500 pikselillä, koska arvo on 50% säiliön leveydestä. Jos sisältävän elementin leveys on 400 pikseliä, kuva 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 koon / laitteen muuttuessa. Jos ajattelet tätä fyysisellä, ei-web-termillä, se on kuin 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äilö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 arvot prosenttiosuuden perusteella. Tässä on toinen esimerkki. Oletetaan, että sinulla on verkkosivusto, jossa koko sivusto on jaossa luokan ”kontti” kanssa (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. Oletusarvoisesti runko renderoidaan 100% selainikkunasta. Siksi “container” -jaoston 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 leveydellä (2000 x .80 = 1600). Vaikka emme muuttaakaan CSS: ää 3 ”col” -jakaumamme koon mukaan ja jätämme ne 30%: iin, ne renderoidaan nyt eri tavalla, koska niiden sisältävä elementti, jonka kontekstissa ne ovat koon mukaan, 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 ​​muuttaisi ”col” -kuvan kokoa. Kuten näette, nämä kaikki ovat yhteydessä toisiinsa, kun on kyse prosenttipohjaisista mitoitusarvoista. 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. Riippumatta siitä, mitoitat kuvia reagoivasti vai käytätkö prosenttileveyksiä todella nestemäisen ruudukon muodostamiseksi, joiden koot ovat suhteessa toisiinsa, näiden laskelmien ymmärtäminen on välttämätöntä halutun ilmeen saavuttamiseksi.

Alusta mla apa chicago Sinun viitteesi

Girard, Jeremy. ”Kuinka prosenttiosuudet toimivat leveyden laskemisessa reagoivalla verkkosivustolla.” ThoughtCo, toukokuu. 14, 2021, thinkco.com/width-calculations-responsive-site-4136178.
Girard, Jeremy. (2021, 14. toukokuuta). Kuinka prosenttiosuudet toimivat leveyden laskemisessa reagoivalla verkkosivustolla. Haettu osoitteesta https://www.thoughtco.com/width-calculations-responsive-site-4136178
Girard, Jeremy. ”Kuinka prosenttiosuudet toimivat leveyden laskemisessa reagoivalla verkkosivustolla.” ThoughtCo. https://www.thoughtco.com/width-calculations-responsive-site-4136178 (käytetty 22. kesäkuuta 2021).