Muchos estudiantes de diseño web receptivo tienen dificultades para usar porcentajes para valores de ancho. Específicamente, existe 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 usas pixeles como valor de ancho, los resultados son muy sencillos. Si utiliza CSS para establecer el valor de ancho de un elemento en el encabezado de un documento en 100 píxeles de ancho, ese elemento será el mismo tamaño que uno que establezca en 100 píxeles de ancho en el contenido o pie de página del sitio web 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é parte del documento aparezca un elemento. Desafortunadamente, aunque 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 receptivo", que explica 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 usa porcentajes para establecer el ancho de un elemento, el tamaño real que muestra el 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 un 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 en realidad 600 píxeles de ancho, usar un valor CSS para mostrarla al 50% no significa que tendrá 300 píxeles de ancho en el navegador web. Este valor porcentual se calcula en función del elemento que contiene esa imagen, no del tamaño real 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, la imagen se mostrará a 500 píxeles ya que ese valor es el 50% del ancho del contenedor. Si el elemento contenedor tiene 400 píxeles de ancho, 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 la contiene.
Recuerde, el diseño receptivo es fluido. Los diseños y tamaños cambiarán a medida que tamaño de la pantalla / cambios en el dispositivo. Si piensa en esto en términos físicos, no relacionados con la web, es como tener una caja de cartón que está llenando con material de embalaje. Si dice que la caja debe llenarse hasta la mitad con ese material, la cantidad de embalaje que necesita variará según el tamaño de la caja. Lo mismo ocurre con los anchos porcentuales en el diseño web.
Porcentajes basados en otros porcentajes
En el ejemplo de imagen / contenedor, usamos valores de píxeles para el elemento contenedor para mostrar cómo se mostraría la imagen receptiva. 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í tienes otro ejemplo.
Supongamos que tiene 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ás para que se muestren como 3 columnas verticales.
Ahora, puede usar CSS para establecer el tamaño de esa división de "contenedor" en el 90%. En este ejemplo, la división del contenedor no tiene otro elemento que la 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 "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á a 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á 540 píxeles de ancho en este ejemplo. Esto se calcula como el 30% de los 1800 píxeles que el contenedor representa (1800 x .30 = 540). Si cambiamos el porcentaje de ese contenedor, estas divisiones internas también cambiarían en el tamaño en el que se renderizan, ya que dependen de ese elemento contenedor.
Supongamos que las ventanas del navegador permanecen en 2000 píxeles de ancho, pero cambiamos el valor porcentual del contenedor al 80% en lugar del 90%. Eso significa que ahora se renderizará a 1600 píxeles de ancho (2000 x .80 = 1600). Incluso si no cambiamos el CSS para el tamaño de nuestras 3 divisiones "col" y las dejamos al 30%, renderizar de manera diferente ahora ya que su elemento contenedor, que es el contexto por el que están dimensionados, ha cambió. Esas 3 divisiones ahora se mostrarán como 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 de "col" y esa imagen se dimensionó usando un porcentaje, el contexto para su tamaño sería el "col" en sí. A medida que esa división de "col" cambiaba de tamaño, también lo haría la imagen dentro de ella. Por lo tanto, si cambia el tamaño del navegador o el "contenedor", eso afectaría a las tres divisiones "col", que, a su vez, cambiar el tamaño de la imagen dentro de la "columna". Como puede ver, todos están conectados cuando se trata de dimensionamiento basado en porcentajes valores.
Cuando considera cómo se representará un elemento dentro de una página web cuando se usa un valor porcentual para su ancho, debe comprender el contexto en el que ese elemento reside en el marcado de la página.
En resumen
Los porcentajes juegan un papel fundamental en la creación del diseño de sitios web receptivos. Ya sea que esté dimensionando imágenes de manera receptiva o usando anchos porcentuales para hacer una cuadrícula verdaderamente fluida son relativos entre sí, comprender estos cálculos será necesario para lograr el aspecto que deseo.