En la sugerencia rápida de hoy, aprenderemos cómo crear diseños con capacidad de respuesta utilizando flotadores CSS, un método de diseño antiguo pero confiable. Con eso hecho, veremos cómo Bootstrap maneja las cosas. Inicialmente, no se pretendía que los flotadores formaran la base de la estructura de la página (los nuevos estándares de CSS, como flexbox y grid, tratan de resolverlo), por lo que trabajar con flotadores a veces puede ser complicado. Veamos un ejemplo para ilustrar eso..
Construyendo un diseño responsivo
Supongamos que queremos construir este diseño de tarjeta:
Echa un vistazo a la versión de tamaño completo para una idea más clara.
Estilos básicos
Para estas cartas, no queremos establecer una altura fija para los subtítulos. Tampoco queremos que sean de ancho fijo. Por lo tanto, para mantener las tarjetas usables, para que no se aplasten demasiado, necesitamos mostrar un número diferente de columnas dependiendo del tamaño de la ventana gráfica..
Configuramos algunas consultas de medios, de modo que se cumple lo siguiente:
Ventana gráfica
No. de columnas
<400px
1
≥400px
2
≥768px
3
≥1024px
4
Aquí está el marcado; Lista de elementos que contienen imágenes y títulos dentro de los elementos de la figura:
Alguna descripcion aqui
Aquí está el CSS para diseñar ese diseño:
/ * estilos estilísticos * / cuerpo ancho: 80%; ancho máximo: 1200px; margen: 40px auto; fuente: normal 14px / 1.5 "Montserrat", "Helvetica Neue", sans-serif; fondo: # cfd8dc; color: # 37474f; figura fondo: humo blanco; margen: 0 0 40px; box-shadow: 0px 2px 4px rgba (0,0,0,0.2); figcaption padding: 20px; img ancho máximo: 100%; altura: auto; bloqueo de pantalla; .clearfix: after content: ""; pantalla: tabla; Limpia los dos; ul margen: 0; relleno: 0; / * estilos estructurales * / li list-style-type: none; flotador izquierdo; relleno-izquierda: 15px; derecho de relleno: 15px; tamaño de caja: caja de borde; / * consultas de medios * / @media screen y (min-width: 400px) li width: 50%; @media screen y (min-width: 768px) li width: 33.333%; @media screen y (min-width: 1024px) li width: 25%;
Notará las consultas de los medios de comunicación en la parte inferior, que dictan qué tan amplias son las tarjetas en ciertas vistas. Esto es lo que nos da:
El problema con este diseño fluido, sin embargo, es que al no eliminar cada fila nueva, algunas tarjetas se atascan cuando intentan encontrar el camino de regreso a la izquierda.
Tarjetas de identificación para borrar
De acuerdo con el ejemplo anterior, cuando la fila contiene cuatro cartas, necesitamos borrar la quinta, luego la novena, y así sucesivamente. Para lograr esto, utilizamos el : nth-of-type (an + b) CSS pseudo-clase donde el an + b El parámetro representa el patrón de repetición deseado. Por ejemplo, en pantallas grandes (es decir, ≥1024 px), usamos 4n + 1. Esta fórmula encuentra cada elemento que es un factor de cuatro, luego selecciona el siguiente uno.
Aquí es cómo podemos cambiar nuestras consultas de medios para modificar qué tarjetas se borran:
Ventana gráfica
No. de columnas
Patrón de repetición
<400px
1
-
≥400px
2
2n + 1
≥768px
3
3n + 1
≥1024px
4
4n + 1
Y aquí está el CSS que logra eso. Tenga en cuenta que nuestras consultas de medios son acumulativas, por lo que tenemos que restablecer la tarjeta de compensación anterior cada vez que definamos una nueva:
Por último, vale la pena mencionar las siguientes cosas:
En vez de claro: izquierda valor de la propiedad también podríamos haber utilizado el más genérico Limpia los dos valor de propiedad.
En vez de : nth-of-type (an + b) CSS pseudo-clase igualmente podríamos haber utilizado el : nth-child (an + b) pseudo-clase.
Ahora que hemos discutido un método para limpiar los flotadores, para ampliar nuestro conocimiento, echemos un vistazo al enfoque de Bootstrap.
Usando el método de Bootstrap
Al aprovechar el sistema de cuadrícula de Bootstrap, podemos crear un diseño receptivo similar al anterior. Nuevamente, dependiendo del tamaño de la ventana gráfica, nuestro diseño cambiará:
Ventana gráfica
No. de columnas
<768px
2
≥768px
3
≥992px
3
≥1200px
4
Aquí está el HTML requerido, indicando que los elementos de nuestra lista llenan seis de las doce columnas en ventanas gráficas extra pequeñas, cuatro columnas en columnas pequeñas y luego tres columnas en ventanas gráficas grandes:
Alguna descripcion aqui
Normalmente, este marcado es todo lo que necesitamos, asumiendo que todas las columnas tienen alturas iguales. Sin embargo, en nuestro ejemplo, las columnas tienen diferentes alturas, por lo que tendremos que eliminar los flotadores. Para ello, utilizaremos el clearfix clase, así como las clases de utilidad de respuesta.
Primero, en pantallas extra pequeñas (<768px), we have a two column layout, therefore we should clear the floats after every second list item. Add the following markup after every second list item:
A continuación, en pantallas pequeñas y medianas (≥768px y <1200px), we have a three column layout, so we need to clear the floats after every third list item. To do this, we add some extra markup after every third list item (not necessary for the last one):
Finalmente, en pantallas grandes (≥1200px), tenemos un diseño de cuatro columnas, por lo que debemos borrar los flotantes después de cada cuarto elemento de la lista. De nuevo, agregue un poco más de marca, esta vez después de cada cuarto elemento de la lista:
Estos bloques adicionales son un poco desordenados (a mucha gente no le gusta usar el marcado para los estilos de conducción) pero logran el mismo resultado final que nuestro método inicial. Cada elemento de la lista está oculto, excepto en ciertos puntos de interrupción cuando asumen bloqueo de pantalla; Actuando efectivamente como divisores horizontales invisibles entre nuestras filas..
Aquí está la demostración asociada:
Conclusión
En este breve artículo, cubrimos dos técnicas simples para crear diseños receptivos con flotadores. Aunque los flotadores pueden no ser (y no deberían ser) la primera opción para sus diseños modernos, espero que en algún momento encuentren estas técnicas útiles. Si está utilizando cualquier otra técnica, asegúrese de compartirla con nosotros!
Share
Accentsconagua
