Cargando...
HTML responsivo
Tras el layout, responsive: la misma URL en móvil y escritorio. HTML empieza con viewport; CSS termina.
Una URL, muchos anchos
No hay un HTML móvil aparte. El hábito de 1200px provoca scroll horizontal.
Respuesta directa
1) meta viewport. 2) anchos fluidos. 3) img max-width:100%. Media queries son tema de CSS.
📊 HTML unlocks vs CSS responsive tools
| Layer | Job for responsiveness | Examples |
|---|---|---|
| HTML viewport | Tell mobile browsers how to size the layout viewport | meta name="viewport" with width=device-width |
| HTML structure | Keep landmarks and flexible wrappers that can reflow | header, main, aside, div.row (from layout) |
| CSS fluid sizing | Let boxes and images shrink instead of overflow | max-width, %, height: auto |
| CSS adaptation | Change columns and spacing at breakpoints | media queries, flex/grid tweaks (CSS courses) |
| Avoid | Huge fixed pixels and layout tables fighting narrow screens | width="1200", whole-page table chrome |
Meta viewport — la pieza HTML esencial
Sin ella muchos móviles encogen un lienzo de escritorio y el texto se ve diminuto.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive demo</title>
</head>
Leer la línea viewport
- name=viewport es el interruptor
- width=device-width = ancho del dispositivo
- initial-scale=1.0 = 100%
- aún hace falta CSS
Imágenes fluidas — marca HTML + escala CSS
img con alt; la escala es CSS.
<style>
img { max-width: 100%; height: auto; }
</style>
<img src="images/wide.jpg" alt="Wide landscape photo">
Leer la regla fluida
- max-width:100%
- height:auto mantiene proporción
- width=1200 desborda en móviles
HTML desbloquea; CSS termina
Viewport y estructura flexible son HTML. Columnas fluidas y breakpoints son CSS.
Práctica — laboratorio de redimensionado
- Añade viewport
- Imagen ancha + CSS fluido
- Estrecha la ventana
- Prueba width=1200 un momento
Errores fáciles
- olvidar viewport
- medios fijos 1200px
- mito de solo HTML
- tablas de layout
Resumen
- viewport es esencial
- imágenes fluidas ayudan
- HTML + CSS
- siguiente: formularios
🧠 Pon a Prueba tu Conocimiento
Listo para Empezar
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
5
Preguntas
70%
Para Aprobar
∞
Tiempo
∞
Intentos
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior