Lue, miten verkkoselaimet määrittävät näytön prosenttiarvojen mukaan
Monet reagoivan web-suunnittelun opiskelijat ovat vaikeita käyttävät prosenttiosuuksia leveysarvoihin. Erityisesti on epäselvyyttä selaimen laskemasta prosenttiosuudet. Alla on yksityiskohtainen selvitys siitä, kuinka prosenttiosuudet toimivat leveyslaskutoimituksissa reagoivassa verkkosivustossa.
Pixelien käyttäminen leveysarvoihin
Kun käytät pikseleitä leveysarvoina, tulokset ovat hyvin suoraviivaisia. Jos määrität elementin leveysarvon asiakirjan otsikkoon 100 prosenttiin leveäksi, CSS-elementti on sama koko kuin 100 pikseliä leveä sivuston sisällön tai alatunnisteen tai muilla aloilla. sivu. Pikselit ovat absoluuttinen arvo, joten 100 pikseliä on 100 pikseliä riippumatta siitä, missä asiakirjassa elementti ilmestyy. Valitettavasti, vaikka pikseliarvot ovat helposti ymmärrettävissä, ne eivät toimi hyvin toimivissa verkkosivustoissa.
Ethan Marcotte loi termiä "reagoiva web design", selittäen tämän lähestymistavan sisältäen 3 avainasemaa:
- Nestemäinen verkko
- Nestemäinen väliaine
- Mediakyselyt
Nämä kaksi ensimmäistä pistettä, nestemäinen verkko ja nestemäinen väliaine saavutetaan käyttämällä prosenttiosuuksia pikseleiden sijaan arvojen kokoamisessa.
Leveysarvojen prosenttiosuuksien käyttäminen
Kun käytät prosenttiosuuksia elementin leveyden määrittämiseen, todellinen koko, joka elementti näyttää, vaihtelee sen mukaan, missä se on asiakirjassa. Prosenttiosuudet ovat suhteellinen arvo, joten näytetty koko on suhteessa muihin asiakirjan osiin.
Jos esimerkiksi asetat kuvan leveyden 50 prosenttiin, tämä ei tarkoita, että kuva näkyy puolessa normaalikokoonsa. Tämä on yleinen väärinkäsitys.
Jos kuva on luonnostaan 600 pikseliä leveä, sen avulla 50%: n näyttäminen CSS-arvolla ei tarkoita sitä, että se olisi 300 pikseliä leveä selaimessa. Tämä prosenttiosuus lasketaan sen sisällön perusteella, joka sisältää kyseisen kuvan, ei itse kuvan koon. Jos kontti (joka voi olla jako tai muu HTML-elementti) on 1000 pikseliä leveä, kuva näkyy 500 kuvapisteessä, koska arvo on 50% kontin leveydestä. Jos sisältöelementti on 400 pikseliä leveä, kuva näkyy vain 200 kuvapistettä, koska kyseinen arvo on 50% kontista. Kyseessä olevassa kuvassa on 50%: n koko, joka riippuu täysin elementistä, joka sisältää sen.
Muista, että reagoiva muotoilu on nestettä. Asettelut ja koot muuttuvat, kun näytön koko / laite muuttuu . Jos ajattelet tätä fyysisissä, ei-web-termeissä, on kuin pahvilaatikko, jonka täytät pakkausmateriaalia. Jos sanot, että laatikko olisi puoliksi täynnä kyseistä materiaalia, tarvitsemasi pakkauksen määrä vaihtelee laatikon koon mukaan. Sama koskee web-suunnittelun prosenttiosuuksia.
Prosenttiosuudet perustuvat muihin prosenttiosuuksiin
Kuvassa / säiliöesimerkissä käytin sisällön elementtien pikseliarvoja osoittamaan, miten vastaava kuva näyttäisi. Todellisuudessa sisältöä sisältävä elementti asetettaisiin myös prosentteina ja kuva tai muut elementit, jotka sisälsivät kyseisen säiliön arvoja prosenttiosuuden perusteella.
Tässä on toinen esimerkki, joka osoittaa tämän käytännössä.
Sano että sinulla on verkkosivusto, jossa koko sivusto on sisällytetty luokassa "kontti" (yhteinen web-suunnittelu käytäntö). Sisäpuolella on kolme muuta jakoa, joiden avulla voit lopulta muotoilla kolmea pystysaraketta. Tämä HTML voi näyttää tältä:
Nyt voit käyttää CSS: tä asettamaan kyseisen "kontti" -ryhmän koko sanoen 90%. Tässä esimerkissä säiliöryhmällä ei ole muuta elementtiä, joka ympäröi sitä muulla kuin keholla, jota emme ole määrittäneet mihinkään tiettyyn arvoon. Oletusarvoisesti keho näyttää 100% selainikkunasta. Siksi "kontti" -ryhmän prosenttiosuus perustuu selainikkunan kokoon. Koska selaimen ikkuna muuttuu kooltaan, niin koko "kontin" koko. Joten jos selainikkuna on 2000 pikseliä leveä, tämä jako näkyy 1800 pikselin tarkkuudella. Tämä lasketaan 90 prosentiksi 2000 (2000 x .90 = 1800)), joka on selaimen koko.
Jos kukin "kontin" sisällä olevista "col" -jakoista on asetettu 30%: n kokoiseksi, niin kukin niistä on 540 pikseliä leveä tässä esimerkissä. Tämä lasketaan 30% 1800 pikselistä, jonka säiliö tekee (1800 x .30 = 540). Jos muutimme kyseisen säiliön prosenttiosuutta, nämä sisäiset jakautumiset muuttuisivat myös niiden koossa, koska ne ovat riippuvaisia siitä sisältävästä elementistä.
Oletetaan, että selainikkunat ovat 2000 pikseliä leveä, mutta kontin prosenttiosuus vaihtuu 80 prosenttiin 90 prosentin sijasta. Tämä tarkoittaa, että se tekee 1600 pikseliä leveäksi (2000 x .80 = 1600). Vaikka emme vaihtaisi CSS: ää kolmiulotteisten kolmiosastojen koolle, ja jättäisimme ne 30 prosenttiin, he tekevät nyt eri tavalla, koska niiden sisältämä elementti, joka on niiden kokoinen konteksti, on muuttunut. Nämä kolme divisioonaa tekevät nyt 480 pikseliä leveä, mikä on 30% 1600: sta tai kontin koko (1600 x .30 = 480).
Kun tätä vielä enemmän, jos yksi näistä "col" -jaksoista sisälsi kuvan ja että kuva koottiin prosenttiosuuksittain, sen kokoonpanon olosuhteet olisivat itse "col". Koska "col" -jako muuttui kokonai- suudessaan, niin sen sisältämä kuva. Joten jos selaimen tai "kontin" koko muuttuisi, se vaikuttaisi kolmeen "col" -jakoon, mikä puolestaan muuttaa "col: n" sisäisen kuvan kokoa. Kuten näette, kaikki nämä ovat yhteydessä, kun se tulee prosenttiperusteisiin mitoitusarvoihin.
Kun tarkastellaan, kuinka elementti verkkosivun sisällä tuottaa, kun prosentuaalinen arvo käytetään sen leveydelle, sinun on ymmärrettävä konteksti, jossa kyseinen elementti sijaitsee sivun merkinnässä.
Yhteenvetona
Prosenttiosuuksilla on ratkaiseva rooli hahmottavien verkkosivustojen ulkoasun luomisessa. Olitpa koonneet kuvia reagoivasti tai käyttämällä prosentuaalisia leveyksiä, jotta saadaan todella nestemäinen verkko, jonka koot ovat suhteessa toisiinsa, näiden laskelmien ymmärtäminen on välttämätöntä halutun ulkoasun saavuttamiseksi.