Más allá de las consultas de medios: uso de funciones HTML y CSS más nuevas para diseños responsivos

Más allá de utilizar consultas de medios y diseños CSS modernos, como flexbox y grid, para crear sitios web responsivos, hay ciertas cosas que se pasan por alto y que podemos hacer bien para crear sitios web responsivos. En este artículo, profundizaremos en una serie de herramientas (que giran en torno a HTML y CSS) que tenemos listas, desde imágenes responsables hasta funciones CSS relativamente nuevas que funcionan de forma natural ya sea que usemos consultas de medios o no.

De hecho, las consultas de medios se vuelven más un complemento cuando se usan con estas funciones que con el enfoque completo. Veamos cómo funciona.

Imágenes verdaderamente responsivas

¿Recuerdas cuando podíamos simplemente agregar width: 100%imágenes y dar por terminado el día? Eso todavía funciona, por supuesto, y hace que las imágenes sean blandas, pero tiene una serie de desventajas, las más notables de las cuales incluyen:

• La imagen puede aplastarse hasta el punto de perder su punto focal.
• Los dispositivos más pequeños aún terminarán descargando la imagen en tamaño completo.

Al utilizar imágenes en la web, debemos asegurarnos de que estén optimizadas en términos de resolución y tamaño. El motivo es garantizar que tengamos la resolución de imagen adecuada para el dispositivo adecuado, de modo que no terminemos descargando imágenes muy grandes y pesadas para pantallas más pequeñas, lo que podría terminar reduciendo el rendimiento de un sitio.

En términos simples, nos aseguramos de que las imágenes más grandes y de alta resolución se envíen a pantallas más grandes, mientras que las variaciones más pequeñas y de baja resolución se envíen a pantallas más pequeñas, mejorando tanto el rendimiento como la experiencia del usuario.

HTML ofrece el pictureelemento que nos permite especificar el recurso de imagen exacto que se representará en función de la consulta de medios que agregamos. Como se describió anteriormente, en lugar de enviar una imagen (generalmente una versión grande y de alta resolución) a todos los tamaños de pantalla y escalarla al ancho de la ventana gráfica, especificamos un conjunto de imágenes para servir en situaciones específicas.

picture  source media="(max-width:1000px)"  source media="(max-width:600px)"  source media="(max-width:400px)"  img src="picture.png" alt="picture""/picture

En este ejemplo, picture.pngla imagen es de tamaño completo. A partir de ahí, definimos la siguiente versión más grande de la imagen, picture-lg.pngy el tamaño se reduce en orden descendente hasta la versión más pequeña picture-sm.png. Tenga en cuenta que todavía utilizamos consultas de medios en este enfoque, pero es el pictureelemento en sí el que impulsa el comportamiento de respuesta en lugar de definir puntos de interrupción en el CSS.

Las consultas de medios se agregan adecuadamente para escalar con los tamaños de la imagen:

• Las ventanas gráficas de 1000 px o más obtienen picture.png.
• Las ventanas gráficas que están entre 601 px y 999 px obtienen picture-lg.png.
• Las ventanas gráficas que están entre 401 px y 600 px obtienen picture-sm.png.
• Cualquier cosa menor a 400px obtiene picture-sm.png.

Curiosamente, también podemos etiquetar cada imagen por densidad de imagen (1x, 2x, 3x, etc.) después de la URL. Esto funciona si hemos hecho las diferentes imágenes en proporción entre sí (lo cual hicimos). Esto permite que el navegador determine qué versión descargar según la densidad de píxeles de la pantalla además del tamaño de la ventana gráfica. Pero observe cuántas imágenes terminamos definiendo:

picture  source media="(max-width:1000px)"  source media="(max-width:600px)"  source media="(max-width:400px)"  img src="picture.png" alt="picture""/picture

Veamos específicamente las dos etiquetas anidadas dentro del pictureelemento: sourcey img.

El navegador buscará el primer sourceelemento donde la consulta de medios coincide con el ancho de la ventana gráfica actual y luego mostrará la imagen adecuada (especificada en el atributo srcset). El imgelemento es necesario como último hijo del pictureelemento, como opción alternativa si ninguna de las etiquetas de origen iniciales coincide.

También podemos usar la densidad de la imagen para manejar imágenes responsables con solo el imgelemento usando el srcsetatributo:

img src="flower-fallback.jpg"

Otra cosa que podemos hacer es escribir consultas de medios en CSS según la resolución de pantalla (generalmente medida en puntos por pulgada o ppp) del dispositivo en sí y no solo en la ventana gráfica del dispositivo. Lo que esto significa es que en lugar de:

@media only screen and (max-width: 600px) {  /* Style stuff */}

Ahora tenemos:

@media only screen and (min-resolution: 192dpi) {  /* Style stuff */}

Este enfoque nos permite dictar qué imagen renderizar en función de la resolución de pantalla del dispositivo, lo que podría resultar útil cuando se trata de imágenes de alta resolución. Básicamente, eso significa que podemos mostrar imágenes de alta calidad en pantallas que admiten resoluciones más altas y versiones más pequeñas con resoluciones más bajas. Vale la pena señalar que, aunque los dispositivos móviles tienen pantallas pequeñas, suelen ser de alta resolución. Eso significa que probablemente no sea la mejor idea confiar únicamente en la resolución al determinar qué imagen renderizar. Podría resultar en mostrar imágenes grandes y de alta resolución en pantallas realmente pequeñas, que pueden no ser la versión que realmente queremos mostrar en un tamaño de pantalla tan pequeño.

body {  background-image : picture-md.png; /* the default image */}
@media only screen and (min-resolution: 192dpi) {  body {    background-image : picture-lg.png; /* higher resolution */  }}

Lo que nos brinda imagen es básicamente la capacidad de crear imágenes artísticas directas. Y, de acuerdo con esta idea, podemos aprovechar las características de CSS, como la object-fitpropiedad que, cuando se usa con object-position, nos permite recortar imágenes para obtener mejores puntos focales manteniendo la relación de aspecto de la imagen.

Entonces, para cambiar el punto focal de una imagen:

@media only screen and (min-resolution: 192dpi) {  body {    background-image : picture-lg.png;    object-fit: cover;    object-position: 100% 150%; /* moves focus toward the middle-right */  }}

Establecer valores mínimos y máximos en CSS

La min()función especifica el tamaño más pequeño absoluto al que se puede reducir un elemento. Esta función resulta realmente útil en términos de ayudar a que los tamaños de texto se escale correctamente en diferentes tamaños de pantalla, como nunca permitir que el tipo fluido caiga por debajo de un tamaño de fuente legible:

html {  font-size: min(1rem, 22px); /* Stays between 16px and 22px */}

min()Acepta dos valores y pueden ser relativos, porcentuales o unidades fijas. En este ejemplo, le decimos al navegador que nunca permita que un elemento con clase .boxtenga un ancho inferior al 45 % o 600 px, lo que sea más pequeño según el ancho de la ventana gráfica:

.box {  width : min(45%, 600px)}

Si el 45% se calcula con un valor inferior a 600 px, el navegador utiliza el 45% como ancho. Por el contrario, si el 45% se calcula con un valor superior a 600 px, entonces se utilizarán 600 px para el ancho del elemento.

Lo mismo ocurre con la max()función. También acepta dos valores, pero en lugar de especificar el tamaño más pequeño para un elemento, definimos el más grande que puede alcanzar.

.box {  width : max(60%, 600px)}

Si el 60% calcula un valor superior a 600 px, el navegador utiliza el 60% como ancho. Por otro lado, si el 60% se calcula con un valor menor que 600 px, entonces se utilizará 600 px como ancho del elemento.

Valores de sujeción

Muchos de nosotros lo hemos estado pidiendo a gritos clamp()desde hace algún tiempo y, de hecho, contamos con un amplio soporte en todos los navegadores modernos (lo siento, Internet Explorer). clamp()es la combinación de las funciones min()y max(), aceptando tres parámetros:

1. el valor mínimo,
2. el valor preferido, y
3. el valor maximo

Por ejemplo:

.box {  font-size : clamp(1rem, 40px, 4rem)}

El navegador establecerá la fuente en 1rem hasta que el valor calculado de 1rem sea mayor que 40px. ¿Y cuando el valor calculado es superior a 40 px? Sí, el navegador dejará de aumentar el tamaño después de alcanzar 4rem. Puede ver cómo se puede utilizar abrazadera() para hacer que los elementos sean fluidos sin recurrir a consultas de medios.

Trabajar con unidades responsables

¿Alguna vez creó una página con un título o subtítulo grande y admiró lo bien que se veía en la pantalla de una computadora de escritorio, solo para revisarla en un dispositivo móvil y descubrir que es demasiado grande? Definitivamente he estado en esta situación y en esta sección explicaré cómo manejar estos problemas.

En CSS, puede determinar los tamaños o longitudes de elementos utilizando varias unidades de medida, y las unidades de medida más utilizadas incluyen: px, em, rem, %, vwy vh. Aunque hay varias unidades más que no se utilizan con tanta frecuencia. Lo que nos interesa es que pxse puede considerar una unidad absoluta, mientras que el resto se consideran unidades relativas.

unidades absolutas

Un píxel ( px) se considera una unidad absoluta principalmente porque es fijo y no cambia según la medida de ningún otro elemento. Puede considerarse como la unidad base o raíz que utilizan algunas otras unidades relativas. Intentar usar píxeles para un comportamiento receptivo puede generar problemas porque está solucionado, pero son excelentes si tiene elementos a los que no se les debe cambiar el tamaño en absoluto.

Unidades relativas

Las unidades relativas, como %, emy rem, se adaptan mejor al diseño responsivo principalmente debido a su capacidad de escalar en diferentes tamaños de pantalla.

vw: Relativo al ancho de la ventana gráfica
vh: Relativo a la altura de la ventana gráfica
rem: Relativo al htmlelemento raíz ( ) (el tamaño de fuente predeterminado suele ser 16px )
em: Relativo al elemento principal
%: Relativo al elemento principal

Nuevamente, el tamaño de fuente predeterminado para la mayoría de los navegadores es 16pxyy eso es lo que remusan las unidades para generar sus valores calculados. Entonces, si un usuario ajusta el tamaño de fuente en el navegador, todo en la página se escala correctamente dependiendo del tamaño de la raíz. Por ejemplo, cuando se trata de una raíz establecida en 16px, el número que especifique multiplicará ese número por el tamaño predeterminado. Por ejemplo:

.8rem = 12.8px (.8 * 16)1rem = 16px (1 * 16)2rem = 32px (2 * 16)

¿Qué pasa si usted o el usuario cambian el tamaño predeterminado? Como ya dijimos, estas son unidades relativas y los valores de tamaño finales se basarán en el nuevo tamaño base. Esto resulta útil en las consultas de medios, donde simplemente cambia el tamaño de fuente y toda la página aumenta o disminuye en consecuencia.

Por ejemplo, si cambias el tamaño de fuente 10pxdentro del CSS, entonces los tamaños calculados terminarían siendo:

html {  font-size : 10px;}

1rem = 10px (1 * 10)2rem = 20px (2 * 10).5rem = 5px (.5 * 10)

Nota: Esto también se aplica al porcentaje %. Por ejemplo:

100% = 16px;200% = 32px; 50% = 8px;

¿Y cuál es la diferencia entre remy emunidades? Es lo que la unidad utiliza como elemento base. remcalcula valores utilizando el tamaño de fuente del htmlelemento raíz (), mientras que un elemento que declara emvalores hace referencia al tamaño de fuente del elemento principal que lo contiene. Si el tamaño del elemento principal especificado es diferente del elemento raíz (por ejemplo, los elementos principales son 18 px pero el elemento raíz es 16 px), entonces emse remresolverá en diferentes valores calculados. Esto nos brinda un control más detallado de cómo responden nuestros elementos en diferentes contextos de respuesta.

vhes un acrónimo de altura de la ventana gráfica, o altura de la pantalla visible. 100vhrepresentan el 100% de la altura de la ventana gráfica (según el dispositivo). En la misma línea, vwsignifica ancho de ventana gráfica, es decir, el ancho de la pantalla visible del dispositivo y, 100vwliteralmente, representa el 100 % del ancho de la ventana gráfica.

Más allá de las consultas de los medios

¿Mira eso? Acabamos de analizar una serie de funciones HTML y CSS realmente poderosas y relativamente nuevas que nos brindan formas adicionales (y posiblemente más efectivas) de desarrollar la capacidad de respuesta. No es que estas técnicas novedosas reemplacen lo que hemos estado haciendo todo el tiempo. Son simplemente más herramientas en nuestro cinturón de herramientas de desarrollador que nos brindan un mayor control para determinar cómo se comportan los elementos en diferentes contextos. Ya sea trabajando con tamaños de fuente, resoluciones, anchos, puntos focales o cualquier cantidad de cosas, tenemos un control más detallado que nunca de la experiencia del usuario.

Entonces, la próxima vez que trabajes en un proyecto en el que desees tener más control sobre la apariencia exacta del diseño en específicos, consulta lo que HTML y CSS nativos pueden hacer para ayudar: es increíble hasta dónde han llegado las cosas. a lo largo de.