Aprende como os navegadores web determinan unha visualización usando valores de porcentaxe
Moitos estudantes de deseño web receptivo teñen un tempo difícil utilizando porcentaxes para valores anchos. Especificamente, hai confusión sobre como o navegador calcula esas porcentaxes. A continuación atoparás unha explicación detallada de como funcionan as porcentaxes dos cálculos de ancho nun sitio web sensible.
Uso de píxeles para valores de ancho
Cando usa píxeles como un valor ancho, os resultados son moi sinxelos. Se usa CSS para definir o valor de ancho dun elemento no encabezado dun documento a 100 píxeles de ancho, ese elemento terá o mesmo tamaño que un conxunto de 100 píxeles de ancho no contido ou no pé de páxina do sitio web ou noutras áreas do documento. páxina. Os píxeles son un valor absoluto, polo que 100 píxeles son 100 píxeles, non importa onde apareza un elemento no documento. Desafortunadamente, mentres os valores de píxeles son fáciles de entender, non funcionan ben nos sitios web responsivos.
Ethan Marcotte acuñou o termo "deseño web sensible", explicando este enfoque que contiña tres directores clave:
- Unha rede de fluídos
- Medios fluidos
- Consultas de medios
Os dous primeiros puntos, unha rede de fluídos e medios fluídos, conséguense empregando porcentaxes, en lugar de píxeles, para dimensionar valores.
Usando porcentaxes para os valores de ancho
Cando usa as porcentaxes para establecer un ancho para un elemento, o tamaño real do elemento que se amosará variará dependendo do lugar onde se atopa o documento. As porcentaxes son un valor relativo, o que significa que o tamaño mostrado é relativo a outros elementos do documento.
Por exemplo, se configura o ancho dunha imaxe nun 50%, isto non significa que a imaxe se amosará á metade do seu tamaño normal. Este é un equívoco común.
Se unha imaxe é nativa de 600 píxeles de ancho, entón usar un valor CSS para mostrar o 50% non significa que terá 300 píxeles de ancho no navegador web. Este valor de porcentaxe calcúlase en función do elemento que contén esa imaxe, e non do tamaño orixinal da propia imaxe. Se o contedor (que podería ser unha división ou algún outro elemento HTML) ten 1000 píxeles de ancho, entón a imaxe mostrarase a 500 píxeles, xa que ese valor é do 50% do ancho do recipiente. Se o elemento que contén é de 400 píxeles de ancho, a imaxe só se mostrará a 200 píxeles, xa que ese valor é do 50% do contenedor. A imaxe aquí en cuestión ten un tamaño do 50% que depende completamente do elemento que o contén.
Lembra que o deseño sensible é fluído. Os tamaños e as modificacións cambiarán a medida que cambie o tamaño / dispositivo de pantalla . Se pensas niso en términos físicos e non web, é como ter unha caixa de cartón que che enche co material de embalaxe. Se di que a caixa debe estar chea de semellante material, a cantidade de embalaxe que precisa varía segundo o tamaño da caixa. O mesmo é válido para os anchos de porcentaxe no deseño web.
Porcentaxes baseadas noutras porcentaxes
No exemplo de imaxe / contedor, usei valores de píxeles para o elemento que contén para mostrar como se mostraría a imaxe sensible. En realidade, o elemento que contén tamén se axustará a unha porcentaxe ea imaxe ou outros elementos dentro do contenedor obterían os seus valores en función dunha porcentaxe de porcentaxe.
Aquí tes outro exemplo que mostra isto na práctica.
Digamos que ten un sitio onde todo o sitio está contido nunha división cunha clase de "contedor" (unha práctica de deseño web común). Dentro desta división hai outras tres divisións que eventualmente mostrarás como 3 columnas verticais. Este HTML pode ser así:
Agora podes usar o CSS para definir o tamaño da división "recipiente" para dicir o 90%. Neste exemplo, a división de contedores non ten outro elemento que o rodea distinto do corpo, que non nos axustaremos a ningún valor específico. Por defecto, o corpo renderizarase como 100% da xanela do navegador. Polo tanto, a porcentaxe da división do "contedor" estará baseada no tamaño da xanela do navegador. Como a ventá do navegador cambia de tamaño, tamén o tamaño deste "contedor". Polo tanto, se a xanela do navegador ten 2000 píxeles de ancho, esta división mostrarase a 1800 píxeles. Isto calcúlase como 90 por cento de 2000 (2000 x .90 = 1800)), que é o tamaño do navegador.
Se cada unha das divisións "col" atopadas dentro do "contedor" están fixadas nun tamaño do 30%, entón cada un deles terá 540 píxeles de ancho neste exemplo. Isto calcúlase como o 30% dos 1800 píxeles que o contenedor fai en (1800 x .30 = 540). Se modificamos a porcentaxe dese contenedor, estas divisións internas tamén cambiarían o tamaño que representan a medida que dependen do elemento que conteña.
Supoñamos que as fiestras do navegador permanecen en 2000 píxeles de ancho, pero cambiamos o valor porcentual do contenedor ata o 80% no canto do 90%. Isto significa que renderáo a 1600 píxeles de ancho agora (2000 x .80 = 1600). Aínda que non modifiquemos o CSS para o tamaño das nosas 3 divisións "col" e deixalas nun 30%, renderanse de xeito diferente xa que o seu elemento que contén, o que ten o tamaño do que cambiou, cambiou. Estas 3 divisións renderán agora como 480 píxeles de ancho cada un, o 30% de 1600 ou o tamaño do contedor (1600 x. 30 = 480).
Tendo isto aínda máis lonxe, se había unha imaxe dentro dunha destas divisións "col" e que a imaxe fose dimensionada usando unha porcentaxe, o contexto para o seu tamaño sería o propio "col". Como esa división "col" cambiou de tamaño, entón a imaxe dentro dela. Polo tanto, se o tamaño do navegador ou o "contedor" cambiou, isto afectaría as tres divisións "col", que á súa vez cambiarían o tamaño da imaxe dentro do "col". Como podes ver, estas están conectadas cando vén a valores de dimensionado orientados por porcentaxe.
Cando teña en conta que un elemento dentro dunha páxina web mostrará cando se use un valor de porcentaxe para o seu ancho, cómpre comprender o contexto no que este elemento reside no marcado da páxina.
En resumo
Os porcentaxes desempeñan un papel fundamental na creación do deseño para sitios web responsivos . Se está dimensionando imaxes de forma sensible ou usando anchos de porcentaxe para facer unha reixa verdadeiramente fluída, cuxos tamaños son relativos entre si, a comprensión destes cálculos será necesaria para acadar o aspecto que desexes.