Cargando...
HTML responsive
Móvil, tablet y escritorio comparten URL. Página responsive se adapta. HTML empieza; CSS termina.
Respuesta directa
1) meta viewport en head
2) Anchos flexibles
3) regla fluid en img
Media queries en CSS.
Viewport meta
html
HTML Code
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive demo</title>
</head>Fluid images helper
html
HTML Code
<style>
img { max-width: 100%; height: auto; }
</style>
<img src="images/wide.jpg" alt="Wide landscape photo">Pruébalo
- viewport en práctica
- imagen ancha + CSS
- estrecha ventana
- compara width fijo
Errores fáciles
- olvidar viewport
- 1200px fijos
- solo HTML basta
Resumen
- viewport esencial
- anchos/imágenes fluid
- media queries CSS
- diseña móvil pronto
🧠 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