Maquetación con Normal Flow para Móviles (Mobile First)

 

Maquetación con Normal Flow para Móviles (Mobile First)

Exacto, para que el flujo natural funcione perfecto en móviles, la estrategia se llama "Mobile First" (Primero Móviles) y se combina con Media Queries. Te lo explico paso a paso:

1. La Filosofía "Mobile First"

La idea es simple:

  1. Primero escribes el CSS para la pantalla más pequeña (móvil) . Aquí confías en el flujo natural: las cajas ya se apilan verticalmente por defecto (porque son block).

  2. Luego, usas Media Queries para decir: "Cuando la pantalla sea más ancha que X, cambia esto para que se vea bien en tablet/escritorio".

Ventaja: El móvil solo carga lo mínimo necesario y el flujo natural evita tener que usar position: absolute o trucos raros.

2. El Viewport (La Etiqueta Obligatoria)

Antes de empezar, asegúrate de que tu HTML tenga esta línea en el <head>. Sin esto, el móvil intentará encoger tu página de escritorio y el flujo natural se rompe.

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

3. La Estructura Básica con Media Queries

Aquí tienes la receta típica. Primero el móvil, luego la tablet, luego el escritorio.

css
/* =========================================== */
/* 1. ESTILOS BASE (PARA MÓVIL) */
/* =========================================== */
/* Aquí usas el flujo natural. Todo es vertical. */
/* Esto se aplica a TODAS las pantallas, hasta que una media query lo cambie */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.5; /* Buen espaciado para leer en móvil */
  padding: 10px; /* Dar un poco de aire al contenido en los bordes */
}

.caja {
  width: 100%; /* Por defecto, que ocupe todo el ancho */
  margin-bottom: 15px; /* Espacio entre cajas (flujo vertical) */
  padding: 20px;
  background-color: lightblue;
  border: 1px solid blue;
  
  /* El texto se ve bien en móvil así */
  text-align: justify; 
  font-size: 16px; /* 16px es lo ideal para móvil (evita zoom automático) */
}

/* =========================================== */
/* 2. MEDIA QUERY PARA TABLET (más de 600px) */
/* =========================================== */
/* Cuando haya espacio, empezamos a poner cosas en horizontal */

@media screen and (min-width: 600px) {
  body {
    padding: 20px; /* Un poco más de padding ahora que hay espacio */
  }

  .contenedor-flex {
    display: flex; /* O grid, pero flex es natural */
    flex-wrap: wrap; /* Para que fluyan a la siguiente línea si no caben */
    gap: 20px; /* Espacio moderno entre cajas */
  }

  .caja {
    /* Cambiamos el flujo: de vertical a horizontal */
    width: calc(50% - 10px); /* Dos columnas (restando la mitad del gap) */
    margin-bottom: 0; /* Ya no necesitamos margen abajo porque usamos gap */
  }
}

/* =========================================== */
/* 3. MEDIA QUERY PARA ESCRITORIO (más de 1024px) */
/* =========================================== */

@media screen and (min-width: 1024px) {
  .caja {
    width: calc(33.333% - 14px); /* Tres columnas */
  }
}

4. El Tamaño de las Fuentes

Algo clave en el flujo natural para móvil es cómo fluye el texto:

css
body {
  /* Unidad REM: Es relativa al tamaño base del navegador */
  /* 1rem = 16px normalmente */
  font-size: 1rem; /* 16px */
}

h1 {
  font-size: 2rem; /* 32px */
  line-height: 1.2;
}

p {
  font-size: 1rem;
  line-height: 1.5;
  text-align: justify; /* Para bordes rectos en móvil */
}

5. Truco: La Rejilla Fluida (La clave del Responsive)

Para que el flujo natural sea realmente automático, no uses anchos fijos (width: 300px), usa porcentajes o flex.

css
/* MAL PARA FLUJO NATURAL */
.caja-mal {
  width: 400px; /* Esto romperá el móvil, se saldrá de la pantalla */
  margin: 0 auto; /* Aunque lo centres, en móvil sobrará espacio */
}

/* BIEN PARA FLUJO NATURAL */
.caja-bien {
  width: 100%; /* Ocupa todo lo que tiene */
  max-width: 400px; /* Pero no crezcas más de 400px */
  margin: 0 auto; /* Si el padre es mas ancho, se centra */
}

6. Ejemplo Práctico: Cards que fluyen

Imagina que tienes 4 cajas. Con el código de arriba:

  1. En móvil: Se ven 4 cajas apiladas (1 por línea).

  2. En tablet: Se ven 2 cajas arriba y 2 abajo (2 columnas).

  3. En escritorio: Se ven 3 en la primera fila y 1 solita abajo (3 columnas).

  4. Si añades una quinta caja: En escritorio, se pondrá automáticamente abajo a la izquierda.

Resumen de tu estrategia con Media Queries:

  1. Sin query: CSS para móvil (todo vertical, fuentes legibles).

  2. @media (min-width: 600px) : CSS para tablet (flex, grid, ajustes).

  3. @media (min-width: 1024px) : CSS para escritorio (columnas extra, más espacio).

¿Quieres que practiquemos con un ejemplo concreto de algo que quieras maquetar?

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS? CSS son las siglas de  Cascading Style Sheets  (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la  presentación  de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición). 2. ¿Cómo se integra CSS con HTML? Hay tres formas principales de incluir CSS en tu proyecto: CSS en línea (Inline):  Se aplica directamente a una etiqueta HTML usando el atributo  style . Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener. html < p style = " color : blue ; font-size : 18px ; " > Este es un párrafo azul. </ p > CSS interno (Internal):  Se escribe dentro de la etiqueta  <style>  en la sección  <head>  del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas. html <...
Leer más

layouts

   "Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos). f Tutorial: Creando una Plantilla de Registro HTML/CSS Objetivo del Proyecto Vamos a crear la estructura básica de una página web que contiene: Un menú de navegación con 4 opciones. Un formulario de registro de usuario. Estilos CSS para que todo se vea ordenado y profesional. Paso 1: Entendiendo la Estructura...
Leer más

Proyecto Práctico: Tarjeta de Perfil

"Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos).    Creando una Tarjeta de Perfil con HTML y CSS Descripción del Proyecto Vamos a crear una tarjeta de perfil profesional que contiene: Foto de perfil circular Nombre de la persona Descripción breve Ubicación Botón interactivo con efectos Al final, tendremos una tarjeta moderna y responsive que se centra en la pa...
Leer más