Conocer los principios del diseño adaptable (responsive), aprender a usar media queries y aplicar clases de Bootstrap para que el sitio funcione bien en pantallas de distintos tamaños. Aplicar principios básicos para diseño adaptable a móviles y tablets.
El diseño responsive asegura que la experiencia sea fluida y agradable para usuarios que visiten un sitio independientemente de que sea mobile, tablet o desktop, diseñando una sola versión que se ajusta automáticamente.
*Para que todo esto funcione en móviles, no olvides incluir esta etiqueta en el <head> de tu HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esto le dice al navegador que debe ajustar el contenido al ancho real del dispositivo.
Comprenderlos ayuda a tomar mejores decisiones:
El diseño adaptable es el más eficiente para desarrollar sitios modernos. Utiliza herramientas como Bootstrap para lograrlo sin reinventar la rueda.
El sistema de grid de Bootstrap divide la pantalla en 12 columnas, facilitando una distribución flexible del contenido.
Usando prefijos como sm, md, lg, defines cuántas columnas ocupa un elemento en distintos tamaños de pantalla. Estos breakpoints activan ajustes automáticos según la resolución, sin escribir media queries.
Tamaño de dispositivo |
Ancho mínimo |
Prefijo de clase |
Ejemplo de uso |
Extra pequeño (XS) |
< 576px |
Sin prefijo |
|
Pequeño (Small) |
≥ 576px |
|
|
Mediano (Medium) |
≥ 768px |
|
|
Grande (Large) |
≥ 992px |
|
|
Extra grande (XL) |
≥ 1200px |
|
|
Extra extra grande (XXL) |
≥ 1400px |
|
|
Bootstrap permite controlar el comportamiento de las columnas usando clases específicas por tamaño de pantalla:
![JuanFuent.es [Cabrera Symbol]](/static/juanfuent.es.c-symbol.svg){kind=small}
col-sm-* (para pantallas pequeñas)col-md-* (pantallas medianas)col-lg-* y col-xl-* (pantallas grandes y extra grandes)<div class="col-12 col-md-6">Contenido adaptable</div>
Esto indica: ocupa todo el ancho en móviles, y la mitad en pantallas medianas en adelante.
Esto es muy útil para crear interfaces más limpias:
d-none oculta completamente el elementod-md-block lo muestra solo a partir de pantallas medianas<div class="d-block d-md-none">Menú móvil</div><div class="d-none d-md-block">Menú escritorio</div>
Esto te permite optimizar la interfaz sin código extra.
Son útiles para adaptar pequeños detalles visuales y complementar lo que Bootstrap no cubre directamente.
Las media queries más comunes son:
max-width: aplica cuando el ancho es menor o igual al valor dado.min-width: aplica cuando el ancho es mayor o igual.Por ejemplo, este código cambia el espaciado del formulario en pantallas pequeñas
@media (max-width: 768px) {.formulario {padding: 10px;}}
Una buena experiencia móvil requiere prestar atención a:
img-fluid para que no se desborden<img src="tarea.png" class="img-fluid">
Esto asegura que el contenido sea cómodo de leer y ver en celulares.
El diseño mobile-first considera que los usuarios tocarán la pantalla con los dedos.
Por eso se recomienda:
Bootstrap incluye clases como btn-block, mb-3 y px-3 para ayudarte a espaciar bien tus elementos.
Puedes analizar el comportamiento en tu browser.
Esto ayuda a detectar errores de diseño o contenido desbordado. Es una práctica esencial para entregar un producto de calidad.
Cada diseño responsivo que implementes te acercará a desarrollar productos más accesibles, modernos y profesionales.
Explora estos recursos para seguir aprendiendo y practicando: