Learje hoe't webbrowsers in display sjen litte troch brûkers fan persintaazjes te brûken
In protte learlingen fan reageare webûntwerp hawwe in pear tiid mei pearen foar brede wearden. Spesifyk is der mislediging mei hoe't de browsers dy persintaazjes jout. Hjirûnder fine jo in detaillearre ferklearring fan hoe persintaazjes wurkje foar breedte-berekkenings op in bepaalde webside.
Brûk piksels foar breedste wearden
As jo piksels as in breedwearde brûke, binne de resultaten hiel ienfâldich. As jo CSS brûke om de breedwearde fan in elemint yn 'e koptekst fan in dokumint op 100 pixels breed te setten, sil dit elemint deselde grutte wêze as ien dat jo op 100 pixels breed yn' e webside ynhâlde of fuotstêf of oare gebieten side. Pixels binne in absolute wearde, dus 100 piksels is 100 piksels, wêr't yn jo dokumint elemint ferskynt. Spitigernôch, wylst pixelwearden maklik te begripen binne, wurkje se net goed op reageare websiden.
Ethan Marcotte hat de term "responsive web design" beskôge, dizze ferklearring te ferklearjen mei 3 key principals:
- In floeibere grille
- Fluid media
- Media-fraach
Dizze earste twa punten, in floeibere en floeiende media wurde berikt troch it brûken fan persintaazjes, ynstee fan piksels, foar it oanpassen fan wearden.
Gebrûk fan persintaazjes foar breedste wearden
As jo persintaazjes brûke om in breedte foar in elemint te fêstlizzen, feroaret de werklike grutte wêrtroch elemint werjûn sil is ôfhinklik fan wêr't it yn it dokumint is. Persintaazjes binne in relatyf wearde, wat betsjuttet dat de werjûn is relatyf oan oare eleminten yn jo dokumint.
As jo bygelyks de breedte fan in ôfbylding oant 50% ynstelle, betsjuttet dit net dat it byld de halve fan har normale grutte werjaan sil. Dit is in mienskiplik miskinzip.
As in ôfbylding natuerlik 600 pixels breed is, brûk dan in CSS-wearde om se mei 50% te sjen, betsjuttet net dat it 300 pixels breed wêze sil yn 'e webbrowser. Dizze prestaasjeswearde wurdt berekkene basearre op it elemint dat dizze ôfbylding befettet, net de natuerlike grutte fan it byld sels. As de kontener (dy't in dieling of wat in oare HTML-elemint wêze soe) is 1000 piksels breed, dan sil it byld sjen op 500 piksels, om't dizze wearde 50% fan de breedte fan de container is. As it hantjen elemint 400 pixels breed is, dan sil it ôfbylding allinich op 200 piksels werjaan, omdat dizze wearde 50% fan 'e kontener is. It byld yn 'e fraach hjir hat in 50% grutte dat hinget folslein ôf fan it elemint dat it befettet.
Tink derom, respektyf ûntwerp is floeiber. De lagen en de grutte sille feroarje as de skermgrutte / apparaten feroaret . As jo tinke oan dit yn 'e fysike net-webside, dan is it graach in kartonbox dat jo mei pakket materiaal folle hawwe. As jo sizze dat it fekje heal folbrocht is mei dat materiaal, sil it bedrach fan jo pakket ôfhinkliket ôfhinklik fan de grutte fan it fekje. Itselde hâldt wier foar persintaazjebreedtes yn webûntwerp.
Persintaazje basearre op oare persintaazjes
Yn it byld / kontener-foarbyld brûkte ik pikselwearden foar it elemint fan elemint om te sjen hoe't it antwurdpikt sjen soe. Yn 'e realiteit sil it elemint ek befetsje wurde oan in persintaazje en it byld, of oare eleminten, binnen dat kontener har wearden krije op grûn fan in persintaazje fan in persintaazje.
Hjir is in oar foarbyld dat dat yn 'e praktyk darget.
Sizje dat jo in webside hawwe wêr't de folsleine side binnen in divyzje befettet mei in klasse fan "container" (in mienskiplike websidepraktyk). Binnen dizze divyzje binne trije oare divyzjes dy't jo úteinlik styl meitsje om as 3 vertike kolommen te sjen. Dat HTML kin dit folgje:
No kinne jo CSS brûke om de grutte fan dizze ôfdieling "container" te setten om 90% te sizzen. Yn dit foarbyld hat de kontener-divyzje gjin oare elemint dy't him oars as it lichem omhinne hat, dat wy gjin spesifike wearde sette. Standert is it lichem as 100% fan it blêder finster. Dêrom sil de persintaazje 'kontener' opdieling basearre wurde op 'e grutte fan it finster fan' e browser. As dat browser-finster feroaret yn grutte, dan sil de grutte fan dit "kontener" wêze. Dus as it blêder finster is 2000 piksels breed, sil dizze divyzje sjen op 1800 piksels. Dit wurdt berekkene as 90 persint fan 2000 (2000 x .90 = 1800)), dy't de grutte fan 'e browser is.
As elk fan 'e divyzjes fan' kol 'fûn binnen de "kontener" fereaske op in grutte fan 30%, dan sil elk fan harren 540 pixels breed wêze yn dit foarbyld. Dit wurdt berekkene as 30% fan 'e 1800 piksels dy't de kontener rintert op (1800 x .30 = 540). As wy it persintaazje fan dat kontener feroare hawwe, sille dizze ynderlike divyzjes ek wizigje yn 'e grutte dy se oan jaan, om't se ôfhinklik fan dat elemint befetsje.
Litte wy der fan út bliuwe dat de blêzers finsters bliuwe op 2000 pixels breed, mar wy feroarje de persintaazjewearde fan 'e kontener oant 80% ynstee fan 90%. Dat betsjut dat hy no 1600 piksels rint no (2000 x .80 = 1600). Sels as wy de CSS net feroarje foar de grutte fan ús divisjes fan 3 kol, en se op 30% ferlitte, sille se no oars ferskille, om't har elemint, wat de kontekst dat se oanbelanget, feroaret. Dizze 3 divyzjes sille no elk 480 pixels breed elke, dat is 30% fan 1600, of de grutte fan 'e kontener (1600 x 30 = 480).
As dit dan noch fierder waard, as der in ôfbylding binnen ien fan dizze divisjes "col" wie en dat byld waard mei in persintaazje bepale, soe it kontekst foar har sizzen de "kol" sels wêze. As dy "kol" -dieling feroare yn grutte, dan soe it byld wurde. As de grutte fan 'e browser of de "container" feroare is, dan soe de divyske "kol" divyzjes beynfloedzje, wat de grutte fan' e ôfbylding yn 'e "col" feroaret. As jo sjogge, dan binne alle ferbûnen wannear It komt om persintaazjebewearre rigelwearden.
As jo beskôgje hoe't in elemint yn in webstee rendert as in persintaazjewearde brûkt wurdt foar syn breed, moatte jo it kontekst begripe wêr't it elemint yn 'e side markearre is.
Gearfetsjend
Persintaazjes spylje in krityske rol by it skeppen fan it webstee foar responsive websides . As jo ôfbyldings oanpasse oanbean of gebrûk fan persintaazjebreaden om in wier flugge grille te meitsjen wêrfan de middels relatyf foar elkoar binne, begrypt dat dizze berekkeningen nedich wêze om it soargjen te sykjen.