Diseño responsivo y la metaetiqueta viewport:
Aprenderás cómo crear sitios web que se adapten automáticamente a diferentes dispositivos y tamaños de pantalla utilizando técnicas de diseño responsivo.
<!-- Metaetiqueta viewport para diseño responsivo -->
<meta name="viewport" content="width=device-width, initial-scale=1">Uso de unidades de medida relativas (em, %):
Explorarás las unidades de medida relativas, como em y %, que te permiten crear diseños más flexibles y adaptables a diferentes tamaños de fuente y pantallas.
/* Uso de unidades em para tamaño de fuente */
body {
font-size: 16px;
}
h1 {
font-size: 2em; /* 32px (16px * 2) */
}
/* Uso de porcentaje para ancho de contenedores */
.container {
width: 80%; /* 80% del ancho del contenedor padre */
}Introducción a Flexbox para diseño flexible:
Aprenderás los conceptos básicos de Flexbox, un sistema de diseño en CSS que facilita la creación de diseños flexibles y alineados de manera eficiente.
/* Uso de Flexbox para alinear elementos en fila */
.container {
display: flex;
justify-content: space-between; /* Distribución equitativa */
}
.item {
flex: 1; /* Distribución equitativa del espacio disponible */
}