Cómo construir una galería de miniaturas sensible (CSS)

Recientemente me propuse construir una galería de imágenes en miniatura receptiva. Esperé que me tomara unos minutos, pero en realidad me tomó unas horas trabajar. Pasaremos por un proceso similar hoy para ayudarlo a comprender mejor cómo funciona.

Un componente importante de dominar el diseño responsivo es descubrir cómo abordar tareas específicas y ajustarse a los problemas a medida que surgen en el contexto de proyectos más grandes. Un día, estará trabajando en un proyecto y necesitará una galería receptiva y recordará esta publicación sobre ese tema.

Vistazo

Antes de comenzar, eche un vistazo rápido a lo que estamos construyendo. Asegúrese de cambiar el tamaño de la página de la ventana de su navegador para obtener un vistazo de qué tan bien responde la página a diferentes tamaños de ventana gráfica.

Manifestación: Haga clic aquí para iniciar la demostración.

HTML inicial

Vamos a saltar a este proyecto con un poco de HTML básico. En lugar de utilizar imágenes antiguas en nuestra galería, buscaremos algo que sea mucho más versátil. Para cualquier entrada dada, es posible que desee una imagen, título y breve descripción. Envuelve todo esto en un elemento repetible y tíralo todo en un contenedor div. Debería verse algo como esto:

   <img src="//lesptitesaffairesdemayl.be/img/images_2/how-to-build-a-responsive-thumbnail-gallery_2.jpg"> <h2>Fluyendo las columnas</h2> <p>Esta es la parte más complicada. Necesitamos averiguar nuestro ancho y margen para cada uno de los elementos en la galería. Al igual que con el contenedor en su conjunto, cada uno de estos deberá usar un porcentaje para que se adapte a los cambios en el tamaño de la ventana gráfica.</p> <p>Como punto de partida, me gustaría usar un diseño de cinco columnas. Para calcular las matemáticas necesarias para lograr esto, es más fácil comenzar con los márgenes. Quiero un margen de cuatro por ciento entre cada columna, así que multiplique eso por cinco columnas y sabemos que el veinte por ciento de nuestro ancho será devorado por los márgenes, lo que deja un ochenta por ciento para el contenido. El ochenta por ciento dividido por cinco equivale a un dieciséis por ciento de ancho para cada columna. </p> <img src="//lesptitesaffairesdemayl.be/img/images_2/how-to-build-a-responsive-thumbnail-gallery_3.jpg"> <p>Ahora podemos agregar estos valores al CSS que ya hemos establecido. Cada clase .galleryItem representa una columna, por lo que cada una tendrá un ancho del 16% y un margen del 2% en cada lado para un total combinado del 4% por artículo. </p>     <textarea wrap="soft" readonly=""> .galleryItem {color: # 797478; fuente: 10px / 1.5 Verdana, Helvetica, sans-serif; flotador izquierdo; ancho: 16%; margen: 2% 2% 50px 2%; }

Esto nos da un diseño perfecto de cinco columnas que se ve muy bien en pantallas de 13 pulgadas o más.

Donde se pone feo

Desafortunadamente, este diseño realmente empieza a chupar a medida que reducimos el tamaño de la página. Cuando estamos por debajo de los 500px de ancho, ha perdido completamente su legibilidad y utilidad.

Para resolver este problema, usaremos consultas de medios para insertar algunos puntos de interrupción que harán que las columnas vuelvan a tener un tamaño más apropiado.

Decidir sobre los puntos de ruptura

Últimamente se ha discutido sobre qué puntos de ruptura deben apuntar en su diseño. El mercado está saturado de diferentes dispositivos, todos en diferentes tamaños, y no es fácil dar cuenta de todo esto específicamente.

Para simplificar esta tarea, desechemos nuestros pensamientos sobre qué tamaño de pantalla tienen los dispositivos más populares y dejemos que nuestro propio diseño decida dónde están los puntos de interrupción. Si analizamos los puntos en los que nuestro diseño se rompe, podemos arreglar esas áreas específicas, haciendo que nuestro diseño se vea bien en todos los dispositivos concebibles (nuestra red de fluidos cuida lo intermedio).

¿Dónde se rompe?

La mejor manera de probar esto es simplemente abrir nuestra vista previa en vivo en un navegador y comenzar a reducir el tamaño de la ventana. Técnicamente, nuestro diseño nunca se romperá porque está diseñado para escalar. Sin embargo, alrededor de 940px, las columnas de texto comienzan a ser demasiado estrechas para mi gusto:

Para tener en cuenta esto, tengo que reducir la cuenta de la columna a cuatro en lugar de cinco en ese momento. Al reducir el ancho de nuestra columna al 21%, podemos hacer esto mismo. Ya que estoy usando ambos? Max-width? y? max-device-width? aquí, el diseño se reflejará tanto en las ventanas del navegador de escritorio (de este tamaño y más bajo) como en cualquier dispositivo con tamaños de pantalla físicos bajo este ancho.

 Pantalla de solo media y (ancho máximo: 940 px), pantalla de solo y ancho máximo del dispositivo: 940 px {.galleryItem {ancho: 21%;}}

Añadir estos estilos soluciona este problema muy bien. Nuestro diseño de cinco columnas ahora funciona perfectamente desde tamaño completo hasta 940px, momento en el que se convierte en un diseño de cuatro columnas.

Enjuague, enjuague y repita

En este punto, simplemente repite este mismo proceso una y otra vez. Continúe reduciendo el tamaño de la ventana y observe un punto en el que el diseño ya no funcione bien. Rápidamente encuentro otra área problemática alrededor de 720px:

Esta vez queremos reducir el diseño a un diseño de dos columnas, que se realiza con un ancho de columna de alrededor del 29.33%.

 Pantalla solo @media y (ancho máximo: 720 px), pantalla única y (ancho dispositivo máximo: 720 px) {.galleryItem {ancho: 29.33333%;}}

Continué este proceso hasta el punto en el que solo tenía una columna del tamaño del iPhone. Aquí está el conjunto completo de consultas de medios.

 / * MEDIA QUERIES * / @media only screen y (max-width: 940px), only screen y (max-device-width: 940px) {.galleryItem {width: 21%;}} @media only screen y (max- ancho: 720px), solo pantalla y (max-device-width: 720px) {.galleryItem {width: 29.33333%;}} @media only screen y (max-width: 530px), solo screen y (max-device-width : 530px) {.galleryItem {width: 46%;}} @media only screen y (max-width: 320px), only screen and (max-device-width: 320px) {.galleryItem {width: 96%;}. galleryItem img {width: 96%;} .galleryItem h3 {font-size: 18px;} .galleryItem p, {font-size: 18px;}}

Conclusión

Ahí lo tenemos.Ahora debería tener una galería de miniaturas de respuestas con un formato agradable que se vea bien en casi todos los dispositivos y tamaños de ventanas del navegador.

En lugar de pensar qué consultas de medios son las más populares, en lugar de eso analizamos los puntos donde nuestro diseño específico dejó de ser funcional y redujimos la cantidad de columnas en ese punto para mejorar la experiencia de lectura. El resultado es un diseño que sobresale en el medio.