info parametrizada y sujeta a cambios
- Adaptando imágenes para diferentes tamaños de pantalla
HTML
Luego, en tu archivo CSS, define el ancho de esa clase como el 50% del elemento que la contiene. Esto asegurará que la imagen siempre ocupe la mitad del ancho disponible, sin importar el tamaño de la pantalla.
Ejemplo en CSS:
CSS
.presentacion__imagen {
width: 50%;
/* Opcional: para que la imagen se vea bien, puedes añadir: /
height: auto;
display: block;
margin: 0 auto; / Para centrar la imagen si es necesario */
}
Al probar en diferentes anchos de pantalla, como 720px, verás cómo la imagen se redimensiona automáticamente.
- Ajustando el diseño para diferentes dispositivos
Para ajustar el diseño general, utilizar la herramienta de "Inspeccionar" de tu navegador es fundamental. Haz clic derecho en la página y selecciona "Inspeccionar" (o presiona F12 o Cmd + Alt + I). Dentro de la herramienta, busca el icono que simula un dispositivo móvil y haz clic en él. Esto te permite ver cómo se ve tu sitio en diferentes tamaños de pantalla, como un portátil o un teléfono.
Una vez en el modo de vista previa de dispositivo, puedes experimentar ajustando los valores de margin (márgenes), padding (relleno) y otros estilos directamente en la ventana de "Estilos" del Inspector. Observa cómo estos cambios afectan la disposición de tus elementos y cómo se reorganizan para adaptarse mejor a la pantalla.
Consejo: Considera usar media queries en tu CSS para aplicar estilos específicos solo a ciertos rangos de anchos de pantalla.
CSS
@media (max-width: 768px) {
/* Estilos que se aplican solo a pantallas más pequeñas de 768px /
.contenedor {
flex-direction: column; / Cambia la dirección de los elementos a columna */
padding: 10px;
}
}
