No sabía que se podían usar varias en un mismo proyecto para adaptar el diseño según el tipo de dispositivo. Me gustó especialmente la idea de definir rangos con min-width y max-width, porque permite controlar con precisión cómo se comporta el sitio entre tamaños específicos. Saber que la mayoría de usuarios acceden desde móviles me motiva aún más a hacer que mis proyectos sean 100% responsivos.
¡Hola Estudiante, espero que estés bien!
Me alegra que estés explorando el uso de múltiples media queries en tus proyectos. Es una herramienta muy poderosa para garantizar que tu sitio web se vea bien en cualquier dispositivo.
Como mencionaste, definir rangos con min-width y max-width es una excelente manera de tener un control preciso sobre cómo se comporta tu sitio en diferentes tamaños de pantalla. Por ejemplo, puedes tener una media query para dispositivos móviles pequeños, otra para tablets y otra para pantallas de escritorio.
Aquí tienes un ejemplo práctico:
/* Estilos generales para todos los dispositivos */
body {
font-family: Arial, sans-serif;
}
/* Estilos para dispositivos móviles pequeños */
@media (max-width: 480px) {
body {
background-color: lightblue;
}
}
/* Estilos para tablets */
@media (min-width: 481px) and (max-width: 800px) {
body {
background-color: lightgreen;
}
}
/* Estilos para pantallas de escritorio */
@media (min-width: 801px) {
body {
background-color: lightcoral;
}
}
En este ejemplo, el color de fondo de tu sitio cambiará dependiendo del dispositivo desde el cual se acceda, lo que te permite ver claramente cómo se aplican diferentes estilos según el tamaño de la pantalla.
Espero que esta explicación te sea útil y te inspire a seguir haciendo tus proyectos 100% responsivos. ¡Espero haber ayudado y buenos estudios!