Leer hoe webblaaiers 'n skerm bepaal met persentasiewaardes
Baie studente van reageerbare webontwerp het 'n moeilike tyd met behulp van persentasies vir breedtewaardes. Spesifiek, daar is verwarring met hoe die leser daardie persentasies bereken. Hieronder vind u 'n gedetailleerde verduideliking van hoe persentasies werk vir breedteberekeninge in 'n responsiewe webwerf.
Gebruik pixels vir breedtewaardes
As jy pixels as 'n wydtewaarde gebruik, is die resultate baie eenvoudig. As jy CSS gebruik om die wydte waarde van 'n element in die kop van 'n dokument tot 100 pixels breed te stel, sal daardie element dieselfde grootte wees as die een wat jy 100 pixels wyd ingestel het in die webwerf se inhoud of voettekst of ander dele van die bladsy. Pixels is 'n absolute waarde, dus 100 pixels is 100 pixels, ongeag waar in jou dokument 'n element verskyn. Ongelukkig, terwyl pixelwaardes maklik verstaanbaar is, werk dit nie goed in reageerende webwerwe nie.
Ethan Marcotte het die term "responsive web design" geskep, en verduidelik hierdie benadering as wat 3 sleutelhoofde bevat:
- 'N Vloeistofrooster
- Vloeistofmedia
- Media navrae
Die eerste twee punte, 'n vloeistelsel en vloeibare media, word behaal deur persentasies, in plaas van pixels, te gebruik vir die grootte van waardes.
Gebruik persentasies vir breedtewaardes
As jy persentasies gebruik om 'n wydte vir 'n element te bepaal, sal die werklike grootte wat daardie element vertoon, verskil, afhangende van waar dit in die dokument is. Persentasies is 'n relatiewe waarde, wat beteken dat die grootte wat vertoon word, relatief is tot ander elemente in jou dokument.
As u byvoorbeeld die wydte van ' n beeld op 50% stel, beteken dit nie dat die beeld teen die helfte van sy normale grootte sal vertoon nie. Dit is 'n algemene misverstand.
As 'n beeld nasionaal 600 pixels wyd is, beteken dit dat die gebruik van 'n CSS-waarde om dit teen 50% te vertoon, nie beteken dat dit 300 pixels wyd in die webblaaier sal wees nie. Hierdie persentasie waarde word bereken op grond van die element wat daardie beeld bevat, nie die oorspronklike grootte van die beeld self nie. As die houer (wat 'n afdeling of 'n ander HTML-element kan wees) 1000 pixels wyd is, sal die prentjie teen 500 pixels vertoon word, aangesien die waarde 50% van die houer se breedte is. As die bevattende element 400 pixels breed is, sal die prent slegs teen 200 pixels vertoon word, aangesien die waarde 50% van die houer is. Die betrokke prentjie het 'n 50% grootte wat heeltemal afhang van die element wat dit bevat.
Onthou, reageer ontwerp is vloeibaar. Layouts en groottes sal verander soos die skermgrootte / toestel verander . As u hieroor dink in fisiese, nie-webterme, is dit soos om 'n kartondoos te hê wat u met verpakkingsmateriaal invul. As u sê dat die boks half gevul moet wees met die materiaal, sal die hoeveelheid verpakking wat u nodig het, wissel afhangende van die grootte van die boks. Dieselfde geld vir persentasie breedte in webontwerp.
Persentasies gebaseer op ander persentasies
In die voorbeeld van die beeld / houer het ek pixelwaardes vir die element gebruik om te wys hoe die responsiewe prent sou vertoon. In werklikheid sal die bevattende element ook tot 'n persentasie gestel word en die beeld, of ander elemente, binne daardie houer sal hul waardes kry op grond van 'n persentasie van 'n persentasie.
Hier is nog 'n voorbeeld wat dit in die praktyk toon.
Sê jy het 'n webwerf waar die hele webwerf in 'n afdeling voorkom met 'n klas van "houer" ('n algemene webontwerppraktyk). Binne daardie afdeling is drie ander afdelings wat jy uiteindelik sal stal om as 3 vertikale kolomme te vertoon. Daardie HTML kan soos volg lyk:
Nou kan jy CSS gebruik om die grootte van daardie "houer" -afdeling te stel om 90% te sê. In hierdie voorbeeld het die houerafdeling nie 'n ander element wat dit omring nie, behalwe die liggaam, wat ons nie op enige spesifieke waarde gestel het nie. By verstek sal die liggaam as 100% van die blaaier venster vertoon. Daarom sal die persentasie van die "houer" -afdeling gebaseer word op die grootte van die blaaier. Soos die blaaier venster verander in grootte, sal die grootte van hierdie "houer" ook so wees. So as die blaaier venster 2000 pixels breed is, sal hierdie afdeling op 1800 pixels vertoon word. Dit word bereken as 90 persent van 2000 (2000 x .90 = 1800)), wat die grootte van die leser is.
As elkeen van die "kol" -afdelings wat in die "houer" voorkom, ingestel is op 'n grootte van 30%, dan sal elkeen 540 pixels wyd in hierdie voorbeeld wees. Dit word bereken as 30% van die 1800 pixels wat die houer aanbring (1800 x .30 = 540). As ons die persentasie van die houer verander het, sal hierdie innerlike afdelings ook verander in die grootte wat hulle lewer, aangesien dit afhanklik is van die element wat daarin voorkom.
Kom ons veronderstel dat die blaaier vensters by 2000 pixels wyd bly, maar ons verander die persentasie waarde van die houer tot 80% in plaas van 90%. Dit beteken dat dit nou op 1600 pixels wyd sal wees (2000 x .80 = 1600). Selfs as ons nie die CSS vir die grootte van ons 3 "col" afdelings verander nie, en hulle op 30% verlaat, sal hulle anders maak, aangesien hulle elemente bevat, wat die konteks is waarop hulle grootte het, verander het. Die 3 afdelings sal nou 480 pixels wyd maak, wat 30% van 1600 is, of die grootte van die houer (1600 x .30 = 480).
As dit nog verder is, as daar 'n beeld binne een van hierdie "kol" afdelings was en dat die beeld met 'n persentasie gemik is, sou die konteks vir sy grootte die "kol" self wees. Aangesien die "kol" -afdeling in grootte verander het, sou die prentjie daardeur gewees het. So as die grootte van die blaaier of die "houer" verander het, sou dit die drie "kol" afdelings beïnvloed, wat die grootte van die prent binne die "col" sou verander. Soos u kan sien, is dit almal verbind wanneer Dit kom by persentasie-gedrewe maatwaardes.
As jy oorweeg hoe 'n element binne 'n webblad sal lewer as 'n persentasie waarde gebruik word vir die breedte daarvan, moet jy die konteks verstaan waarin daardie element in die opmerkings van die bladsy voorkom.
In Opsomming
Persentasies speel 'n kritieke rol in die skep van die uitleg vir reageerende webwerwe . Of jy die beelde reageer of met behulp van persentasie breedtes gebruik om 'n ware vloeistelsel te maak waarvan die groottes relatief tot mekaar is. Om hierdie berekeninge te verstaan, sal nodig wees om die voorkoms wat jy verlang, te bereik.