Cómo calculan los navegadores el porcentaje de ancho de banda en los sitios web con capacidad de respuesta

Cómo calculan los navegadores el porcentaje de ancho de banda en los sitios web con capacidad de respuesta

Cómo calculan los navegadores el porcentaje de ancho de banda en los sitios web con capacidad de respuesta

VALORACIÓN DEL ARTÍCULO:
5/5


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:

  1. Una red de fluidos
  2. Fluidos
  3. 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.

TAMBIÉN TE INTERESA

ordenador sobremesa Deep Gaming

Deep Gaming, la marca española confiable para personalizar un PC

Como en casi todos los ámbitos, en el mundo del gaming hay dos tipos de personas: los que apuestan un por un PC ya configurado o los que quieren personalizar su PC. Para estos últimos, Deep Gaming es una gran opción para empezar a poner a punto su setup. Hablamos de una marca española con

Qué es un CDN y por qué es relevante

Cómo mejorar la experiencia web con un CDN

Imagínate visitar un sitio web y tener que esperar largos segundos para que se cargue cada página o imagen. Esta experiencia frustrante no solo afecta nuestra paciencia, sino que también puede influir negativamente en la percepción de una marca o empresa. Aquí es donde entra en juego el CDN, o Content Delivery Network, una tecnología

como detectar ofertas de trabajo falsas

Ojo con las ofertas de trabajo falsas: aprende a detectarlas

Las ofertas de trabajo falsas están a la orden del día. En muchos casos parecen reales porque coinciden en un momento en el que estamos en búsqueda activa de empleo. Puede que nos hallamos inscrito a un proceso de selección en LinkedIn y, de repente, alguien intenta contactar con nosotros por mail o WhatsApp. A

portatil gaming HP OMEN 17

Nuevo HP OMEN 17: un portátil gaming grande en todos los sentidos

HP ha lanzado una nueva línea de dispositivos OMEN y HyperX diseñados para ofrecer una experiencia de juego más inmersiva y fluida. Esta nueva gama incluye ordenadores, accesorios, periféricos y software que se adaptan a todo tipo de jugadores, desde profesionales hasta aquellos que están eligiendo su primer PC. Entre las nuevas incorporaciones se encuentran