Tutorial: diseño responsive con media queries

Si tu página se ve perfecta en tu laptop pero es un desastre en el celular, tienes la mitad de una página. La mayoría de tus visitantes van a llegar desde el teléfono, así que esto no es opcional.

Paso 1: agrega el viewport (el paso que todos olvidan)

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

Sin esta línea, los celulares "simulan" ser una pantalla de escritorio y todo se ve diminuto. Con ella, el navegador respeta el ancho real del dispositivo. Cópiala, pégala, no la olvides nunca.

Paso 2: diseña primero para móvil

.contenedor {
  padding: 1rem;
  font-size: 1rem;
}

Empezar por el diseño móvil (mobile-first) te obliga a priorizar lo esencial. Es más fácil agregar espacio en pantallas grandes que quitarlo en pantallas chicas.

Paso 3: agrega estilos para pantallas más grandes

@media (min-width: 768px) {
  .contenedor {
    padding: 3rem;
    font-size: 1.25rem;
    max-width: 800px;
    margin: 0 auto;
  }
}

min-width: 768px significa "aplica esto solo si la pantalla mide 768px o más" (tablets y computadoras). Puedes encadenar varias media queries para distintos tamaños.

Paso 4: prueba en el navegador

Abre las herramientas de desarrollador (F12), activa el modo de dispositivo móvil y cambia el tamaño de la ventana. Si tu diseño se reacomoda sin romperse, felicidades: es responsive. Si algo se desborda de la pantalla, no es un bug místico, seguramente es un ancho fijo (width: 500px) que olvidaste hacer flexible.

¿Qué acabas de aprender?

• Por qué el meta viewport es obligatorio.
• Cómo diseñar mobile-first y agregar estilos progresivamente.
• Cómo usar @media (min-width: ...) para adaptar tu diseño.