Fundamentos del diseño responsivo en HTML
El diseño responsivo permite que tu sitio web se vea bien en diferentes dispositivos como móviles, tabletas o computadoras de escritorio. Esto requiere tamaños y diseños flexibles.
Metaetiqueta de viewport
La metaetiqueta viewport es fundamental para el diseño responsivo. Sin ella, los navegadores pueden usar un diseño de ancho fijo, lo cual distorsiona tu página en dispositivos móviles.
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">Anchos en porcentaje
En lugar de píxeles fijos, usa valores en porcentaje para los anchos. De esta manera, los elementos se adaptan al contenedor padre y al tamaño de pantalla.
html
<div style="width: 80%;">This box is 80% of its parent</div>Imágenes flexibles
Para que las imágenes no se desborden de su contenedor, configura max-width en 100% y height en auto. Así la imagen se ajustará automáticamente al espacio disponible.
html
<img src="image.jpg" style="max-width: 100%; height: auto;" alt="Responsive image">Crear un diseño responsivo
Usa Flexbox o Grid en CSS para crear varias columnas que se reorganizan o envuelven en pantallas pequeñas. La propiedad flex-wrap evita que los elementos se desborden.
html
<div style="display: flex; flex-wrap: wrap;">
<div style="flex: 1 1 300px;">Left</div>
<div style="flex: 1 1 300px;">Right</div>
</div>Ejemplo de página completamente responsiva
Este ejemplo muestra una página HTML básica que se adapta a diferentes tamaños de pantalla. Las imágenes y contenedores se redimensionan automáticamente.
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 100%;
max-width: 800px;
margin: auto;
padding: 20px;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive Layout</h1>
<p>This layout adapts to screen size.</p>
<img src="https://via.placeholder.com/600x300" alt="Example">
</div>
</body>
</html>Errores comunes
Evita usar tamaños fijos (por ejemplo, width="600") porque no se adaptan a diferentes pantallas. En su lugar, usa configuraciones flexibles como max-width y height: auto.
html
<!-- Bad: fixed size -->
<img src="image.jpg" width="600" height="300">
<!-- Good: responsive -->
<img src="image.jpg" style="max-width: 100%; height: auto;" alt="Responsive image">Uso de media queries
Las media queries te permiten definir diferentes estilos para tamaños de pantalla específicos. Esto es especialmente útil al diseñar versiones distintas para móviles y escritorio.
html
<style>
body {
background-color: white;
}
@media (max-width: 600px) {
body {
background-color: lightgray;
}
}
</style>Consejos prácticos
Evita anchos fijos, incluye siempre la metaetiqueta viewport y prueba tu sitio en varios tamaños de pantalla. Puedes usar las herramientas para desarrolladores del navegador para esto.
Seleccionar idioma
Establecer tema
© 2025 ReadyTools. Todos los derechos reservados.