Tenía la misma duda, la verdad de como visualizaría con tantas modificaciones otra vez como sitio web pero interesante saber que puede agregarle los px dependiendo del dispositivo.
Tenía la misma duda, la verdad de como visualizaría con tantas modificaciones otra vez como sitio web pero interesante saber que puede agregarle los px dependiendo del dispositivo.
Hola Carla, espero que estés bien
Entiendo que estás explorando cómo las media queries pueden ayudarte a hacer tu sitio web más responsivo dependiendo del dispositivo. Es genial que estés interesado en cómo se pueden aplicar diferentes estilos según el tamaño de la pantalla.
Las media queries son una herramienta poderosa para adaptar el diseño de tu sitio web a diferentes dispositivos. Por ejemplo, puedes tener una media query que aplique ciertos estilos cuando la pantalla tiene un ancho máximo de 480px, ideal para dispositivos móviles, y otra para tabletas con un ancho máximo de 800px. Esto te permite personalizar la experiencia del usuario en cada dispositivo.
Un ejemplo práctico sería:
/* Estilos para móviles */
@media (max-width: 480px) {
body {
background-color: lightblue;
}
}
/* Estilos para tabletas */
@media (max-width: 800px) {
body {
background-color: lightgreen;
}
}
En este caso, el fondo del sitio cambiará de color dependiendo del dispositivo desde el cual se acceda. Además, si quieres definir un rango, puedes hacerlo así:
/* Estilos para dispositivos entre 480px y 800px */
@media (min-width: 480px) and (max-width: 800px) {
body {
background-color: lightcoral;
}
}
Esto significa que los estilos se aplicarán solo en pantallas que estén dentro de ese rango de tamaño.
Espero que estos ejemplos te ayuden a entender mejor cómo trabajar con media queries para lograr un diseño responsivo. ¡Bons estudios!