Diseño Responsivo
## Objetivos de Aprendizaje
- Entender los principios del diseño responsivo
- Usar media queries
- Implementar enfoque mobile-first
- Dominar tipografía e imágenes responsivas
## Principios del Diseño Responsivo
1. **Diseños fluidos** - usar unidades relativas
2. **Imágenes flexibles** - escalar con el contenedor
3. **Media queries** - aplicar estilos en puntos de quiebre
## Meta Tag de Viewport
Requerido para renderizado móvil adecuado:
```html
```
## Media Queries
### Sintaxis Básica
```css
@media (condición) {
/* Reglas CSS */
}
```
### Puntos de Quiebre
```css
/* Pantallas pequeñas (móvil) */
@media (min-width: 576px) { }
/* Pantallas medianas (tableta) */
@media (min-width: 768px) { }
/* Pantallas grandes (portátil) */
@media (min-width: 992px) { }
/* Pantallas extra grandes (escritorio) */
@media (min-width: 1200px) { }
/* Extra extra grande */
@media (min-width: 1400px) { }
```
### Puntos de Quiebre con Max-width
```css
/* Hasta e incluyendo móvil */
@media (max-width: 575.98px) { }
/* Hasta e incluyendo tableta */
@media (max-width: 767.98px) { }
```
### Orientación
```css
/* Horizontal */
@media (orientation: landscape) { }
/* Vertical */
@media (orientation: portrait) { }
```
## Enfoque Mobile-First
Escribe estilos base para móvil, luego añade estilos más grandes:
```css
/* Estilos base (móvil) */
.container {
width: 100%;
padding: 0 15px;
}
.column {
width: 100%;
}
/* Tableta y superior */
@media (min-width: 768px) {
.container {
width: 720px;
margin: 0 auto;
}
.column {
width: 50%;
}
}
/* Escritorio y superior */
@media (min-width: 992px) {
.container {
width: 960px;
}
.column {
width: 33.333%;
}
}
```
## Unidades Relativas
### Porcentajes
```css
.container {
width: 90%;
}
.column {
width: 100%;
}
```
### em vs rem
```css
/* em: relativo al tamaño de fuente del padre */
.text {
font-size: 1.5em; /* 1.5 veces el padre */
}
/* rem: relativo al tamaño de fuente raíz */
.text {
font-size: 1.5rem; /* 1.5 veces la raíz (html) */
}
```
### vw y vh
```css
/* vw: 1% del ancho del viewport */
.full-width {
width: 100vw;
}
/* vh: 1% del alto del viewport */
.hero {
height: 100vh;
}
/* Altura mínima con desplazamiento */
.page {
min-height: 100vh;
min-height: 100dvh; /* Altura de viewport dinámico (más nuevo) */
}
```
## Imágenes Flexibles
### Ancho Máximo
```css
img {
max-width: 100%;
height: auto;
}
```
### Object Fit
```css
.cover-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.profile-image {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
}
```
### Imágenes de Fondo
```css
.hero {
background-image: url("imagen.jpg");
background-size: cover;
background-position: center;
}
```
## Tipografía Responsiva
### Tamaños de Fuente Fluidos
```css
/* Usando clamp() */
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
/* Usando calc() */
h1 {
font-size: calc(1rem + 2vw);
}
```
### Altura de Línea Escalable
```css
p {
font-size: 1rem;
line-height: 1.6; /* Sin unidades, escala con font-size */
}
```
## Navegación Responsiva
### Menú Móvil
```html
```
```css
/* Móvil */
.menu-toggle {
display: block;
}
.nav-menu {
display: none;
flex-direction: column;
}
/* Escritorio */
@media (min-width: 768px) {
.menu-toggle {
display: none;
}
.nav-menu {
display: flex;
flex-direction: row;
}
}
```
## Sistemas de Cuadrícula Responsivos
### Cuadrícula con Flexbox
```css
.row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.col {
flex: 1;
padding: 0 15px;
}
.col-12 { flex: 0 0 100%; }
.col-6 { flex: 0 0 50%; }
.col-4 { flex: 0 0 33.333%; }
.col-3 { flex: 0 0 25%; }
```
### Cuadrícula con CSS Grid
```css
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}
.col-12 { grid-column: span 12; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
```
## Container Queries
Nuevo enfoque - estilos basados en el tamaño del contenedor:
```css
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: flex;
}
}
```
## Tablas Responsivas
### Desplazamiento Horizontal
```css
.table-wrapper {
overflow-x: auto;
}
```
### Vista de Tarjetas
```css
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead {
display: none;
}
tr {
margin-bottom: 1rem;
border: 1px solid #ddd;
}
td {
padding-left: 50%;
position: relative;
}
td::before {
content: attr(data-label);
position: absolute;
left: 15px;
font-weight: bold;
}
}
```
## Pruebas
### DevTools del Navegador
- Barra de Dispositivos de DevTools de Chrome
- Modo de Diseño Responsivo de Firefox
### Herramientas en Línea
- BrowserStack
- LambdaTest
## Resumen
- Siempre incluir meta tag de viewport
- Usar media queries para puntos de quiebre
- Mobile-first: estilos base para móvil, añadir estilos para pantallas más grandes
- Usar unidades relativas (%, em, rem, vw, vh)
- Imágenes: `max-width: 100%` y `object-fit: cover`
- Tipografía fluida con `clamp()` o `calc()`
- Probar en múltiples tamaños de pantalla
- Considerar container queries para diseño responsivo basado en componentes
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →