Muchos estudiantes de diseño web sensible tienen dificultades para usar porcentajes para los valores de ancho. Específicamente, hay confusión con la forma en que el navegador calcula esos porcentajes. A continuación, encontrará una explicación detallada de cómo funcionan los porcentajes para los cálculos de ancho en un sitio web receptivo.
Uso de píxeles para valores de ancho
Cuando utiliza píxeles como un valor de ancho, los resultados son muy directos. Si usa CSS para establecer el valor de ancho de un elemento en el encabezado de un documento a 100 píxeles de ancho, ese elemento tendrá el mismo tamaño que el que estableció a 100 píxeles de ancho en el contenido del sitio web o pie de página u otras áreas de la página. Los píxeles son un valor absoluto, por lo que 100 píxeles son 100 píxeles sin importar en qué lugar del documento aparezca un elemento. Desafortunadamente, si bien los valores de píxeles son fáciles de entender, no funcionan bien con sitios web receptivos.
Ethan Marcotte acuñó el término "diseño web sensible", y explicó que este enfoque contiene 3 principios clave:
- Una rejilla fluida
- Medios fluidos
- Preguntas de los medios
Esos dos primeros puntos, una cuadrícula fluida y medios fluidos se logran utilizando porcentajes, en lugar de píxeles, para los valores de tamaño.
Uso de porcentajes para valores de ancho
Cuando utiliza porcentajes para establecer un ancho para un elemento, el tamaño real que muestra ese elemento variará dependiendo de dónde se encuentre en el documento. Los porcentajes son un valor relativo, lo que significa que el tamaño que se muestra es relativo a otros elementos en su documento.
Por ejemplo, si establece el ancho de una imagen al 50%, esto no significa que la imagen se mostrará a la mitad de su tamaño normal. Este es un error común.
Si una imagen tiene 600 píxeles de ancho de forma nativa, usar un valor CSS para mostrarla al 50% no significa que tendrá un ancho de 300 píxeles en el navegador web. Este valor de porcentaje se calcula en función del elemento que contiene esa imagen, no del tamaño nativo de la imagen en sí. Si el contenedor (que podría ser una división o algún otro elemento HTML) tiene 1000 píxeles de ancho, entonces la imagen se mostrará a 500 píxeles ya que ese valor es el 50% del ancho del contenedor. Si el elemento que contiene tiene 400 píxeles de ancho, entonces la imagen solo se mostrará a 200 píxeles, ya que ese valor es el 50% del contenedor. La imagen en cuestión aquí tiene un tamaño del 50% que depende completamente del elemento que lo contiene.
Recuerda, el diseño responsivo es fluido. Los diseños y tamaños cambiarán a medida que cambie el tamaño de la pantalla / dispositivo. Si lo piensa en términos físicos, no web, es como tener una caja de cartón que está llenando con material de embalaje. Si dice que la caja debe estar llena hasta la mitad con ese material, la cantidad de empaque que necesita variará dependiendo del tamaño de la caja. Lo mismo se aplica a los porcentajes de ancho en el diseño web.
Porcentajes basados en otros porcentajes
En el ejemplo de imagen / contenedor, usamos valores de píxeles para el elemento que contiene para mostrar cómo se mostraría la imagen sensible. En realidad, el elemento contenedor también se establecería como un porcentaje y la imagen u otros elementos, dentro de ese contenedor, obtendrían sus valores basados en un porcentaje de un porcentaje.
Aquí hay otro ejemplo que muestra esto en la práctica.
Digamos que tienes un sitio web donde todo el sitio está contenido dentro de una división con una clase de "contenedor" (una práctica común de diseño web). Dentro de esa división hay otras tres divisiones que eventualmente diseñará para que se muestren como 3 columnas verticales. Ese HTML puede verse así:
Ahora, puede usar CSS para establecer el tamaño de esa división de "contenedor" en 90%. En este ejemplo, la división de contenedores no tiene otro elemento que lo rodee que no sea el cuerpo, que no hemos establecido en ningún valor específico. De forma predeterminada, el cuerpo se representará como el 100% de la ventana del navegador. Por lo tanto, el porcentaje de la división de "contenedor" se basará en el tamaño de la ventana del navegador. A medida que la ventana del navegador cambia de tamaño, también lo hará el tamaño de este "contenedor". Entonces, si la ventana del navegador tiene 2000 píxeles de ancho, esta división se mostrará en 1800 píxeles. Esto se calcula como el 90 por ciento de 2000 (2000 x .90 = 1800), que es el tamaño del navegador. Si cada una de las divisiones "col" encontradas dentro del "contenedor" se establece en un tamaño del 30%, entonces cada una de ellas tendrá un ancho de 540 píxeles en este ejemplo. Esto se calcula como el 30% de los 1800 píxeles que representa el contenedor en (1800 x .30 = 540). Si cambiamos el porcentaje de ese contenedor, estas divisiones internas también cambiarían en el tamaño al que se procesan, ya que dependen de que contengan el elemento. Supongamos que las ventanas del navegador permanecen a 2000 píxeles de ancho, pero cambiamos el valor porcentual del contenedor al 80% en lugar del 90%. Eso significa que se procesará a 1600 píxeles de ancho ahora (2000 x .80 = 1600). Incluso si no cambiamos el CSS para el tamaño de nuestras 3 divisiones "col", y las dejamos en un 30%, ahora se mostrarán de manera diferente ya que su elemento que contiene, que es el contexto por el que están dimensionadas, ha cambiado. Esas 3 divisiones ahora se representarán con 480 píxeles de ancho cada una, que es el 30% de 1600, o el tamaño del contenedor (1600 x .30 = 480). Llevando esto aún más lejos, si hubiera una imagen dentro de una de estas divisiones "col" y esa imagen fuera dimensionada usando un porcentaje, el contexto para su tamaño sería la "col" en sí misma.A medida que la división de "col" cambió de tamaño, también lo haría la imagen en su interior. Por lo tanto, si el tamaño del navegador o el "contenedor" cambia, eso afectaría las tres divisiones "col", que a su vez, cambiarían el tamaño de la imagen dentro de la "col". Como puede ver, estos son todos conectado cuando se trata de valores de tamaño controlados por porcentaje. Cuando considera cómo se representará un elemento dentro de una página web cuando se utiliza un valor de porcentaje para su ancho, debe comprender el contexto en el que reside ese elemento en el marcado de la página. Los porcentajes desempeñan un papel fundamental en la creación del diseño para sitios web receptivos. Ya sea que esté ajustando el tamaño de las imágenes de forma responsiva o utilizando anchuras porcentuales para hacer una cuadrícula verdaderamente fluida cuyos tamaños sean relativos entre sí, será necesario comprender estos cálculos para lograr el aspecto que desea. En resumen
