Responsive Design y Media Queries

Viewport y Unidades Responsive

• Meta viewport: Indica al navegador cómo escalar el contenido en pantallas pequeñas. Sin esta etiqueta, el diseño se ve "alejado" en móvil.
• Unidades relativas: % se adapta al contenedor, rem usa el tamaño base del documento, em depende del padre, vh/vw dependen del viewport.
• Imágenes fluidas: max-width: 100% evita que se salgan del contenedor y height: auto conserva la proporción.

Media Queries (Mobile First)

css
Copiar
1.container { padding: 1rem; }
2.grid { display: flex; flex-direction: column; gap: 1rem; }
3
4@media (min-width: 768px) {
5  .grid { flex-direction: row; flex-wrap: wrap; }
6  .grid-item { flex: 1 1 45%; }
7}
8
9@media (min-width: 1024px) {
10  .grid-item { flex: 1 1 30%; }
11}
12
13@media (prefers-color-scheme: dark) {
14  body { background: #1a1a1a; color: #fff; }
15}

• Enfoque mobile-first: estilos base para móvil y mejoras progresivas.
• Breakpoints comunes (480/768/1024/1440) y orientación.

Navbar Hamburguesa

html
Copiar
1<nav class="navbar">
2  <div class="logo">MiSitio</div>
3  <button class="menu-toggle" aria-label="Abrir menú">☰</button>
4  <ul class="nav-menu">
5    <li><a href="#home">Inicio</a></li>
6    <li><a href="#about">Nosotros</a></li>
7    <li><a href="#services">Servicios</a></li>
8    <li><a href="#contact">Contacto</a></li>
9  </ul>
10</nav>

css
Copiar
1.navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: #333; color: #fff; }
2.menu-toggle { display: block; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
3.nav-menu { display: none; position: absolute; top: 60px; left: 0; right: 0; background: #333; flex-direction: column; padding: 1rem; }
4.nav-menu.active { display: flex; }
5@media (min-width: 768px) {
6  .menu-toggle { display: none; }
7  .nav-menu { display: flex; position: static; flex-direction: row; gap: 2rem; }
8}

• Manejo de estado (clase .active) con JavaScript básico para abrir/cerrar menú.
• Consideraciones de accesibilidad: aria-label y foco en enlaces.

Optimización de Imágenes

• Formatos recomendados (WebP, AVIF) y tamaños adecuados por viewport.
• srcset/sizes para servir imágenes responsivas.
• Lazy loading con loading="lazy".