Obteniu informació sobre com els navegadors web determinen una visualització amb valors percentuals
Molts estudiants de disseny web sensible tenen dificultats per utilitzar els percentatges dels valors d'amplada. Concretament, hi ha confusió sobre com el navegador calcula aquests percentatges. A continuació trobareu una explicació detallada de com funcionen els percentatges de càlculs d'amplada en un lloc web sensible.
Ús de píxels per a valors d'amplada
Quan utilitzeu píxels com a valor d'ample, els resultats són molt senzills. Si utilitzeu CSS per establir el valor d'amplada d'un element a la capçalera d'un document a 100 píxels d'amplada, aquest element tindrà la mateixa mida que un que estableixi a 100 píxels d'amplada al contingut o el peu de pàgina del lloc web o d'altres àrees del lloc. pàgina. Els píxels són un valor absolut, de manera que 100 píxels són 100 píxels, independentment del lloc on aparegui un document. Malauradament, mentre els valors de píxels són fàcils d'entendre, no funcionen bé en llocs web responsables.
Ethan Marcotte va encunyar el terme "disseny web sensible", explicant aquest enfocament que contenia tres principis clau:
- Una graella de fluids
- Mitjans fluids
- Consultes de mitjans
Aquests dos primers punts, una xarxa de fluids i mitjans fluids, s'aconsegueix mitjançant percentatges, en comptes de píxels, per dimensionar valors.
Ús de percentatges per als valors d'amplada
Quan utilitzeu percentatges per establir un ample d'un element, la mida real que mostra l'element variarà en funció del lloc on es troba el document. Els percentatges són un valor relatiu, és a dir, la mida mostrada és relativa a altres elements del document.
Per exemple, si estableix l'amplada d' una imatge al 50%, això no vol dir que la imatge es mostri a la meitat de la seva mida normal. Això és un error equivocat.
Si una imatge és de forma nativa 600 píxels d'amplada, després d'utilitzar un valor CSS per mostrar-lo al 50% no vol dir que serà 300 píxels d'amplada al navegador web. Aquest percentatge de valor es calcula en funció de l'element que conté aquesta imatge, no de la mida original de la imatge. Si el contenidor (que podria ser una divisió o algun altre element HTML) té 1000 píxels d'amplada, la imatge es mostrarà a 500 píxels, ja que aquest valor és del 50% de l'amplada del contenidor. Si l'element que conté és de 400 píxels d'amplada, la imatge només es mostrarà a 200 píxels, ja que aquest valor és del 50% del contenidor. La imatge en qüestió aquí té una mida del 50%, que depèn completament de l'element que el conté.
Recordeu que el disseny sensible és fluid. Els dissenys i les mides canviaran a mesura que canvia la mida / dispositiu de la pantalla . Si penses en termes físics i no web, és com tenir una caixa de cartró que ompliu amb material d'embalatge. Si vostè diu que la caixa ha d'estar a la meitat d'aquest material, la quantitat d'embalatge que necessita variarà depenent de la mida de la caixa. El mateix passa amb l'amplada de percentatges del disseny web.
Percentatges basats en altres percentatges
En l'exemple imatge / contenidor, he utilitzat valors de píxel per a l'element que conté per mostrar com es mostrarà la imatge de resposta. En realitat, l'element que conté també s'establirà en un percentatge i la imatge, o altres elements, dins d'aquest contenidor obtindrien els seus valors en funció d'un percentatge d'un percentatge.
Aquí teniu un altre exemple que ho demostra a la pràctica.
Digueu que teniu un lloc web on tot el lloc està contingut dins d'una divisió amb una classe de "contenidor" (una pràctica comuna de disseny web). Dins d'aquesta divisió hi ha tres altres divisions que acabarà amb estil per mostrar-se com a 3 columnes verticals. Aquest HTML pot semblar així:
Ara, podeu utilitzar CSS per definir la mida d'aquesta divisió "contenidor" per dir el 90%. En aquest exemple, la divisió de contenidors no té un altre element que l'envolta que no sigui el cos, que no hem establert cap valor específic. Per defecte, el cos es renderitzarà com a 100% de la finestra del navegador. Per tant, el percentatge de la divisió "contenidor" es basarà en la mida de la finestra del navegador. Com que la finestra del navegador canvia de mida, també tindrà la mida d'aquest "contenidor". Així, si la finestra del navegador té 2000 píxels d'amplada, aquesta divisió es mostrarà a 1800 píxels. Això es calcula com a 90 per cent de 2000 (2000 x .90 = 1800)), que és la mida del navegador.
Si cada una de les divisions "col" trobades dins del "contenidor" s'estableixen en una mida del 30%, llavors cadascuna d'elles tindrà 540 píxels d'amplada en aquest exemple. Això es calcula com el 30% dels 1800 píxels que el contenidor fa a (1800 x .30 = 540). Si hem canviat el percentatge d'aquest contenidor, aquestes divisions internes també canviarien en la mida que representen, ja que depenen d'aquest element contenidor.
Suposem que les finestres del navegador romanen a 2000 píxels d'amplada, però canviem el valor de percentatge del contenidor al 80% en comptes del 90%. Això vol dir que es reproduirà ara a 1600 píxels d'amplada (2000 x .80 = 1600). Fins i tot si no modifiquem el CSS per la mida de les nostres 3 divisions "col", i les deixem al 30%, es mostraran de manera diferent ja que el seu element que conté, el context en el qual estan dimensionats, ha canviat. Aquestes 3 divisions ara representaran 480 píxels d'amplada cadascuna, el 30% de 1600, o la mida del contenidor (1600 x. 30 = 480).
Prenent això encara més, si hi hagués una imatge dins d'una d'aquestes divisions "col" i aquesta imatge es va dimensionar utilitzant un percentatge, el context per al seu dimensionament seria el "col". Com que la divisió "col" ha canviat de grandària, també hi hauria la imatge dins d'ella. Així que si la mida del navegador o el "contenidor" canviés, això afectaria les tres divisions "col", que al seu torn canviarían la mida de la imatge dins del "col". Com podeu veure, aquestes es connecten tot quan es tracta de valors de dimensionament orientats per percentatge.
Quan considereu com s'utilitzarà un element dins d'una pàgina web quan s'utilitzi un valor de percentatge per al seu ample, haureu d'entendre el context en què aquest element resideix en el marcat de la pàgina.
En resum
Els percentatges tenen un paper fonamental en la creació del disseny per a llocs web responsables . Ja sigui que dimensioneu les imatges de manera sensible o utilitzeu l'amplada de percentatges per fer una xarxa veritablement fluida, les mides són relatives entre si, la comprensió d'aquests càlculs serà necessària per aconseguir l'aspecte que desitgeu.