Algunos ejemplos de media queries | HTML y CSS: trabajando con responsividad y publicación de proyectos | Alura Latam

Algunos ejemplos de media queries en código que puedes utilizar para hacer que tu sitio sea responsivo:

Media Query para dispositivos móviles (ancho máximo de 480px):

css Copiar código @media (max-width: 480px) { body { background-color: lightblue; } h1 { font-size: 20px; } } Media Query para tabletas (ancho máximo de 800px):

css Copiar código @media (max-width: 800px) { body { background-color: lightgreen; } h1 { font-size: 24px; } } Media Query para un rango de tamaños de pantalla (entre 480px y 800px):

css Copiar código @media (min-width: 480px) and (max-width: 800px) { body { background-color: lightcoral; } h1 { font-size: 22px; } } Recuerda que puedes ajustar los estilos dentro de cada media query según las necesidades de tu diseño.

¡Hola Estudiante, espero que estés bien!

Veo que estás explorando el uso de media queries para hacer que tu sitio web sea responsivo, lo cual es una excelente manera de asegurar que tu diseño se vea bien en diferentes dispositivos.

Los ejemplos que compartiste son un buen punto de partida. Aquí te dejo algunos consejos adicionales que podrían ser útiles:

Media Query para Escritorio Grande: Si deseas ajustar el diseño para pantallas de escritorio más grandes, puedes usar algo como:
```
@media (min-width: 1200px) {
    body {
        background-color: lightyellow;
    }
    h1 {
        font-size: 28px;
    }
}
```
Media Query para Orientación: Puedes usar media queries para aplicar estilos basados en la orientación del dispositivo:
```
@media (orientation: landscape) {
    body {
        background-color: lightgrey;
    }
}
```
Media Query para Resolución de Pantalla: También puedes dirigirte a dispositivos con ciertas resoluciones:
```
@media (min-resolution: 2dppx) {
    body {
        background-color: lightpink;
    }
}
```

Recuerda que las media queries te permiten adaptar tu diseño a diferentes condiciones de visualización, lo cual es crucial en el desarrollo web moderno. Espero que estos ejemplos te sean de ayuda. ¡Bons estudios!