Wéi fannt Dir Websäite fir e Display mat Prozentzuelen
Vill Studente vu reaktive Webdesign hunn eng schwiereg Zäit mat Prozent fir Breetungswäerter. Besonnesch gëtt et Verwirrung wéi de Browser dës Prozenter berechent. Ënner anerem fannt Dir eng detailléiert Erklärung fir d'Prozentsaart fir d'Breetrechnungen op enger reaktiounsäit Websäit ze schaffen.
Benotzungspixel fir Width Values
Wann Dir Pixel als Breetwäert benotzt, sinn d'Resultater ganz einfach. Wann Dir CSS benotzt fir de Breetstärke vun engem Element am Kappzeechen vun engem Dokument op 100 Pixel breed ze setzen, ass dëst Element déiselwecht Gréisst wéi een dat Dir op 100 Pixel breed ass wéi am Inhalt oder Fouss vun der Websäit oder aner Gebidder vun der Säit. Pixel sinn e absolute Wäert, also ass 100 Pixelen 100 Pixelen egal wou an Ärem Dokument en Element erscheint. Leider, während Pixel Wäerter einfach ze verstoen, sie funktionéieren net gutt op reagéiert Websäiten.
Den Ethan Marcotte huet den Term "Répertoire Webdesign" entwéckelt, deen dësen Approche als 3 Schlësselprinzipien erkläert huet:
- E flüchten Gitter
- Medien
- Medien Ufroen
Déi éischt zwou Punkten, e flëssege Gitter a flëssege Medien, ginn erreecht duerch Prozenter, anstelle vu Pixelen, fir Wäerter z'entwéckelen.
Benotzungsperioden fir Width Values
Wann Dir Prozedäit benotzt fir eng Breet fir e Element ze grënnen, ass d'tatsächlech Gréisst déi Element um Display gewënnt, variéieren jee wéi se am Dokument ass. Prozentsaache sinn e relativen Wäert, wat d'Gréisst ugewisen ass relativ zu aner Elementer an Ärem Dokument.
Zum Beispill, wann Dir d'Breet vun engem Bild op 50% setzt, heescht dat net datt de Bilan hallef vun senger normaler Gréisst uginn. Dëst ass e gemeinsame Misskonkenn.
Wann e Bild ass natiirlech 600 Pixel breed ass, dann mat engem CSS -Wäert ze weisen, op 50% ze weisen, heescht net datt et 300 Pixel breed ass am Web Browser. Dëse prozentual Wert gëtt mat dem Element berechent, deen dëse bildt enthält, net déi gebierteger Gréisst vum Bild selwer. Wann de Container (dat kéint eng Divisioun oder e puer aner HTML Elementer sinn) ass 1000 Pixel breed, da wäert d'Bild op 500 Pixel weisen, well dee Wäert ass 50% vun der Breet vun der Behälter. Wann de enthaltenden Element 400 Pixel breed ass, da wäert d'Bild nëmmen op 200 Pixel weisen, well dee Wäert ass 50% vum Container. D'Bild ass eng 50% Gréisst déi hänkt komplett vum Element, deen et enthält.
Denkt drun, reagéiert Design ass fléisseg. Layouten a Gréisste wäerten änneren wann d'Bildschirmgréisst / Apparat geännert gëtt . Wann Dir un dëst an physeschem, net-web terms denken, ass et wéi eng Karton déi Dir mat Verpackungsmaterial füllt. Wann Dir seet, datt d'Këscht mat där Matière hallef voll ass, de Betrag vun der Packung Dir braucht variéieren jee no der Gréisst vum Këscht. Dat selwecht gëllt fir Prozentebatterien am Webdesign.
Prozentsaagen Op Grond vun aner Prozent
Am Bild / Container Beispill benotzt ech Pixelwäerter fir den Element, fir ze weisen wéi d'Response-Biller wäerte weisen. An der Realitéit ass d'Element mat engem Prozentsatz an dem Bild oder aner Elementer an dësem Container géifen hir Wäerter op Basis vun engem Prozentsaz vun engem Prozentsaz kréien.
Hei ass en anere Beispill deen dat an der Praxis weist.
Sot Dir eng Websäit, wou de ganze Site an enger Divisioun mat enger Klass vun "Container" enthale gëtt (eng gemeinsam Webdesign). An dëser Divisioun sinn dräi aner Divisiounen déi Dir iergendeng Styl fir 3 vertikale Säulen ze weisen. Dëst HTML ka kucken wéi:
Elo kënnt Dir CSS fir d'Gréisst vun der Divisioun "Container" setzen fir 90% ze soen. An dësem Beispill weist d'Container Divisioun keen anere Element, deen enner wéi den Kierper ëmgëtt, dee mir keng spezifesch Valeur hunn. Par défaut gëtt de Kierper fir 100% vun der Browserfenou. Dofir gëtt de Prozentsaz vun "Container" de Prozentsaz op der Gréisst vum Browserfenster baséiert. Wéi déi Browser-Fënster wiesselt an der Gréisst, da wäerte d'Gréisst vum "Container" sinn. Also wann d'Browserfenewinn 2000 Pixel breed ass, gëtt dës Divisioun op 1800 Pixel ugewisen. Dëst gëtt berechent als 90 Prozent vun 2000 (2000 x .90 = 1800)), wat d'Gréisst vum Browser ass.
Wann all eenzel vun de "Kol" Divisiounen am "Container" fonnt goufen op eng Gréisst vun 30% festgeluecht ginn, da wäerte se an dësem Beispill 540 Pixelen breed sinn. Dëst gëtt berechent als 30% vun den 1800 Pixelen, déi de Container bei (1800 x .30 = 540) rendert. Wa mir de Prozentsaz vun deem Container geännert hunn, änneren dës innere Divisiounen och an der Gréisst, déi se rendern, well se vun där Element ofhänken.
Loosst eis ugeholl datt d'Browserfensters op 2000 Pixel breed bleiwen, awer mir änneren den Prozentsatzwäert vum Container op 80% anstatt 90%. Dat heescht datt et 1600 Pixelen breed ass (2000 x .80 = 1600). Och wa mir d'CSS net fir d'Gréisst vun eis Divisiounen änneren, a se op 30% verléieren, gi se anescht wéi elo, well hir Element, wat de Kontext ass, wat se agefouert hunn, geännert huet. Déi 3 Divisiounen ginn elo ewell 480 Pixelen breed, wat 30% vun 1600 oder d'Gréisst vum Container (1600 x 0,30 = 480) ass.
Wann Dir nach nach weider, wann et eng Bild an engem vun dësen Divisiounen "col" war, an deem Bild mat engem Prozentsatz ofgeschnidden ass, ass de Kontext fir säi Gréisst en "Kol" selwer. Wéi déi "Kol" Divisioun geännert gouf an der Gréisst, also wäerte d'Bild dobannen. Also wann d'Gréisst vum Browser oder de "Container" geännert huet, wärend den dräi "Kol" Divisiounen betrëfft, déi d'Gréisst vum Bild innerhalb der "col" änneren. Wéi Dir gesitt, ginn dës all ugeschloss wann Et ass d'Prozentsatz-priedegt Dimensiounswerte.
Wann Dir kuckt, wéi e Element innerhalb vun enger Websäit rendert, wann e prozentual Wäerter fir seng Breet benotzt gëtt, musst Dir den Kontext verstoen, an deem dësen Element an der Markéierung vum Säiten wunnt.
Zesummefaassend
De Prozentsatz spillt eng kritesch Roll beim Schaffen vun de Layout fir reaktiouns Websiten . Egal ob Dir Biller bäi respektéiert oder prozentual Breet benotzt, fir e wierklech fléissend Gitter z'entwéckelen, deem seng Gréisste relativ zuenee verdeelen, d'Verständnis vun dëse Berechnungen ass néideg fir de Look deen Dir wënscht.