Muchos estudiantes de diseño web con capacidad de respuesta 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 el cálculo de la anchura en un sitio web con capacidad de respuesta.
Índice de contenidos
Uso de píxeles para valores de ancho
Cuando se utilizan píxeles como valor de anchura, 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 tendrá el mismo tamaño que el establecido en 100 píxeles de ancho en el contenido del sitio web, en el pie de página o en 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 los píxeles son fáciles de entender, no funcionan bien con sitios web con capacidad de respuesta.
Ethan Marcotte acuñó el término «diseño web sensible», explicando que este enfoque contiene tres principios clave:
- Una red de fluidos
- Fluidos
- Consultas de medios
Estos dos primeros puntos, una cuadrícula de fluido y un medio fluido, se logran utilizando porcentajes, en lugar de píxeles, para los valores de tamaño.
Uso de porcentajes para valores de ancho
Cuando se utilizan porcentajes para establecer el ancho de un elemento, el tamaño real de 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 mostrado es relativo a otros elementos del documento.
Por ejemplo, si establece el ancho de una imagen en 50%, esto no significa que la imagen se mostrará a la mitad de su tamaño normal. Esta es una idea equivocada común.
Si una imagen tiene una anchura nativa de 600 píxeles, el uso de un valor CSS para mostrarla al 50% no significa que tendrá una anchura de 300 píxeles en el navegador web. Este valor porcentual se calcula en base al elemento que contiene la imagen, no al 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 un ancho de 1000 píxeles, 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 es de 400 píxeles de ancho, entonces la imagen sólo se mostrará a 200 píxeles, ya que ese valor es el 50% del contenedor. La imagen en cuestión tiene un tamaño del 50% que depende completamente del elemento que la contiene.
Recuerde, el diseño sensible es fluido. Los diseños y tamaños cambiarán a medida que cambie el tamaño de la pantalla o el dispositivo. Si usted piensa en esto en términos físicos, es como tener una caja de cartón que usted está llenando con material de empaque. Si usted dice que la caja debe estar medio llena de ese material, la cantidad de embalaje que usted necesita variará dependiendo del tamaño de la caja. Lo mismo se aplica a los porcentajes de ancho de banda en el diseño web.
Porcentajes basados en otros porcentajes
En el ejemplo imagen/contenedor, utilizamos valores de píxeles para el elemento de contenido para mostrar cómo se mostraría la imagen sensible. En realidad, el elemento que contiene 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.
He aquí otro ejemplo que lo demuestra en la práctica.
Supongamos que usted 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 usted eventualmente estilizará para mostrarlas como 3 columnas verticales. Ese HTML puede parecerse a esto:
Ahora, puede usar CSS para establecer el tamaño de la división «contenedor» en un 90%. En este ejemplo, la división del contenedor no tiene otro elemento que lo rodee aparte del cuerpo, el cual no hemos establecido a ningún valor específico. Por defecto, el cuerpo se renderizará 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 cambie de tamaño, también cambiará el tamaño de este «contenedor». Así que si la ventana del navegador tiene 2000 píxeles de ancho, esta división se mostrará a 1800 píxeles. Se calcula que es el 90% de 2000 (2000 x .90 = 1800)), que es el tamaño del navegador.
Si cada una de las divisiones «col» que se encuentran dentro del «contenedor» se ajusta a un tamaño del 30%, entonces cada una de ellas tendrá una anchura de 540 píxeles en este ejemplo. Esto se calcula como el 30% de los 1800 píxeles que el contenedor muestra (1800 x .30 = 540). Si cambiáramos el porcentaje de ese contenedor, estas divisiones internas también cambiarían en el tamaño al que se muestran, ya que dependen de que contengan el elemento.
Supongamos que las ventanas del navegador permanecen en 2000 píxeles de ancho, pero cambiamos el valor del porcentaje del contenedor a 80% en lugar de 90%. Esto 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%, se mostrarán de forma diferente ahora, ya que su elemento que las contiene, que es el contexto por el que están dimensionadas, ha cambiado. Esas 3 divisiones ahora renderizarán como 480 píxeles de ancho cada una, que es 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 se dimensionara usando un porcentaje, el contexto para su dimensionamiento sería el propio «col». Como esa división «col» cambió de tamaño, también lo haría la imagen dentro de ella. Así que si el tamaño del navegador o del «contenedor» cambiara, esto afectaría a las tres divisiones «col», las cuales, a su vez, cambiarían el tamaño de la imagen dentro del «col». Como puede ver, todos ellos están conectados cuando se trata de valores de tamaño basados en porcentajes.
Cuando se considera cómo se renderizará un elemento dentro de una página web cuando se utiliza un valor de porcentaje para su ancho, se necesita entender el contexto en el que ese elemento reside en el marcado de la página.
En Resumen
Los porcentajes juegan un papel crítico en la creación del diseño de sitios web con capacidad de respuesta. Ya sea que esté dimensionando imágenes de forma sensible o utilizando anchos de porcentaje para crear una cuadrícula verdaderamente fluida cuyos tamaños sean relativos entre sí, será necesario comprender estos cálculos para lograr el aspecto que desea.
