
Apps responsive con React
Capítulo 8: React responsive
Último capítulo del curso React en el que te voy a mostrar el uso de media queries de CSS para crear apps responsive.
Si quieres que haga algunos proyectos extra diferentes a este, puedes dejármelo en los comentarios. Si veo que lo queréis muchos, seguiré haciendo más proyectos.
Elementos responsive con React
Para mostrar correctamente las cajas también en los dispositivos con pantallas pequeñas, podemos hacer uso de las media queries de CSS.
Solo tenemos que modificar el estilo de contenedorCajas
en función del tamaño de la pantalla. Yo lo que quiero, es que cuando los elementos en tres columnas ya no quepan bien en la pantalla, que se pongan en filas. Esto es tan fácil como cambiar el display: flex
por un display: inline-block
.
.contenedorCajas{
display: flex;
justify-content: center;
}
@media screen and (max-width: 700px) {
.contenedorCajas {
display: inline-block;
}
}
Con esto, cuando la pantalla pase a ser de 700px de ancho o menos, las cajas se van a colocar en filas.
Si quieres, puedes añadir diferentes tamaños de la misma forma, para que el comportamiento cambie con más tamaños de pantalla.
No vamos a profundizar más aquí, ya que esto son temas específicos de CSS. Lo dejo para el curso que tengo dedicado a CSS.
Comentarios
Si te quedan dudas sobre el temario, sobre React, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.