Esta clase fue clave para entender cómo hacer que un sitio web se adapte a cualquier dispositivo. Aprendí qué son las Media Queries y cómo usarlas para aplicar estilos según el tamaño de pantalla. También descubrí que el porcentaje es una gran herramienta para lograr diseños flexibles y responsivos. Ahora sé cómo ajustar mi sitio para que se vea bien tanto en un celular como en una computadora.
¡Hola Estudiante, espero que estés bien!
Me alegra saber que encontraste la clase tan útil y que has aprendido sobre las Media Queries y el uso de porcentajes para lograr diseños responsivos. Es realmente importante entender cómo hacer que un sitio web se adapte a diferentes dispositivos, ya que hoy en día las personas acceden a internet desde una variedad de dispositivos con diferentes tamaños de pantalla.
Un ejemplo práctico de cómo podrías usar las Media Queries es ajustar el diseño de una página para que un menú de navegación horizontal se convierta en un menú desplegable en dispositivos móviles. Podrías hacerlo con algo como esto:
/* Estilo para pantallas grandes */
nav {
display: flex;
justify-content: space-between;
}
/* Media Query para pantallas pequeñas */
@media (max-width: 600px) {
nav {
flex-direction: column;
}
}
En este caso, el menú se mostrará en línea en pantallas grandes y se reorganizará en una columna en pantallas más pequeñas.
Espero que este ejemplo te ayude a ver cómo puedes aplicar lo que aprendiste en situaciones reales. ¡Espero que sigas disfrutando del aprendizaje de HTML y CSS! Espero haber ayudado y buenos estudios!