CSS

Responsive moderno: fluido, media queries de rango y preferencias

Construye interfaces adaptables con layout fluido, clamp(), media queries modernas, container queries y accesibilidad basada en preferencias.

¿Cuánto sabes de CSS?

📘 Teoría

Mentalidad responsive: fluido primero

Diseña para el contenido, no para un dispositivo fijo.

El responsive moderno prioriza layouts fluidos que se adaptan sin depender de demasiados breakpoints.

Empieza con contenedores flexibles, imágenes que se escalan y tipografía con tamaños relativos.

Define breakpoints cuando el contenido lo necesite, no por tamaños de dispositivo.

Usa width: 100% y max-width para controlar el ancho.
Evita tamaños fijos grandes en el layout.
Usa rem para consistencia y accesibilidad.
Media queries: pocas, claras y con intención.

Base fluida

:root {
  font-size: 16px;
}

.container {
  width: min(100% - 2rem, 1100px);
  margin: 0 auto;
}

img {
  max-width: 100%;
  height: auto;
}

Unidades fluidas y escalas

Combina %, rem y clamp() para controlar el tamaño sin saltos.

rem mantiene escalas coherentes y accesibles.

% y vw permiten adaptar elementos a su contenedor o viewport.

clamp() define tamaños fluidos con límites seguros.

Tipografía fluida

h1 {
  font-size: clamp(2rem, 1.4rem + 2vw, 3.5rem);
}

section {
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
}

Media queries modernas (range syntax)

Más legibles y más cercanas a la lógica matemática.

La sintaxis de rango permite escribir comparaciones directas con width y height.

Es equivalente a min-width/max-width, pero resulta más clara y menos propensa a errores.

Antiguo: @media (min-width: 768px)
Moderno: @media (width >= 768px)
Rango: @media (600px

  Ejemplos de range syntax
@media (width >= 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (600px <= width <= 1200px) {
  .hero { padding: 4rem; }
}

 
    
  Sintaxis antigua vs moderna 
  Mismo resultado, lectura más clara.
    
  1 
 La sintaxis clásica con min-width y max-width sigue siendo válida, pero la de rango es más directa y legible.
 
 
  2 
 Ambas son equivalentes: elige una y sé consistente en tu proyecto.
 
 
   Comparativa
/* Clásico */
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Rango (moderno) */
@media (width >= 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Clásico (rango) */
@media (min-width: 600px) and (max-width: 1200px) {
  .hero { padding: 4rem; }
}

/* Rango (moderno) */
@media (600px <= width <= 1200px) {
  .hero { padding: 4rem; }
}

 
    
  Breakpoints con intención 
  Define puntos de cambio basados en el contenido.
    
  1 
 No necesitas muchos breakpoints. Elige puntos donde el diseño realmente se rompe.
 
 
  2 
 Mobile-first sigue siendo recomendable: define estilos base y amplía en pantallas grandes.
 
 
   Breakpoints claros
.grid {
  display: grid;
  gap: 1rem;
}

@media (width >= 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (width >= 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

 
    
  Preferencias del usuario 
  Accesibilidad y respeto a contexto real.
    No es solo responsive visual: también es responsive al contexto humano.
Estas media queries mejoran accesibilidad, rendimiento percibido y confort de uso.
Conviene tratarlas como parte del diseño base, no como un extra tardío.
 
   
  1 
 Movimiento
 prefers-reduced-motion permite reducir animaciones para usuarios sensibles o contextos donde el exceso de movimiento perjudica la lectura.
  
 
  2 
 Color
 prefers-color-scheme adapta el modo claro u oscuro según la preferencia del sistema y mejora la coherencia visual.
  
 
  3 
 Datos
 prefers-reduced-data ayuda a entregar menos recursos en conexiones limitadas o escenarios donde conviene reducir consumo.
  
 
 Preferencias
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (prefers-color-scheme: dark) {
  body { background: #0b1220; color: #e2e8f0; }
}

@media (prefers-reduced-data: reduce) {
  .hero-video { display: none; }
}

 
    
  Interacción y dispositivos 
  No todos usan ratón.
    
  1 
 hover: hover detecta punteros precisos (ratón o trackpad).
 
 
  2 
 pointer: coarse detecta interacción táctil para aumentar áreas clicables.
 
 
  3 
 Esto evita efectos hover innecesarios en móviles y mejora la accesibilidad.
 
 
   Media queries de interacción
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
}

@media (pointer: coarse) {
  .btn { padding: 14px 18px; }
}

 
    
  Features de dispositivo 
  Orientación, resolución y scripting.
    Úsalas cuando la capacidad del dispositivo cambia de verdad la experiencia.
No conviertas cada feature en un breakpoint extra si no resuelve un problema concreto.
Piensa primero en legibilidad, carga y fallback antes de sofisticar el comportamiento.
 
   
  1 
 Orientación
 orientation permite adaptar la interfaz según el modo retrato o paisaje cuando el cambio de formato altera de verdad la composición.
  
 
  2 
 Resolución
 resolution y min-resolution ayudan a servir gráficos más nítidos en pantallas de alta densidad sin tratar todas las pantallas igual.
  
 
  3 
 Scripting
 scripting detecta si el navegador soporta JavaScript y te permite ajustar la experiencia o los fallbacks.
  
 
 Ejemplos útiles
@media (orientation: landscape) {
  .hero { min-height: 70vh; }
}

@media (min-resolution: 2dppx) {
  .logo { background-image: url('/logo@2x.png'); }
}

@media (scripting: none) {
  .js-only { display: none; }
}

 
    
  Layouts flexibles con Flex y Grid 
  Flexbox para componentes, Grid para layout global.
    
  1 
 Flexbox es ideal para elementos en fila o columna con alineación rápida.
 
 
  2 
 Grid ofrece control 2D para secciones principales.
 
 
  3 
 Combina ambos para interfaces modernas y mantenibles.
 
 
   Grid responsive
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.card {
  padding: 1.5rem;
  border-radius: 16px;
  background: #fff;
}

 
    
  Container queries 
  Adapta componentes según su contenedor, no según la ventana.
  Las container queries permiten que un componente cambie su layout según el ancho de su contenedor.
Activa el contenedor con la propiedad container-type y define @container para estilos condicionales.
 
   Son especialmente útiles en componentes reutilizables, cards, sidebars y módulos embebidos.
Evitan depender siempre del viewport global para resolver micro-layouts.
Te ayudan a construir sistemas más modulares y menos frágiles.
 
  Ejemplo de container query
.card-wrapper {
  container-type: inline-size;
}

.card {
  display: grid;
  gap: 1rem;
}

@container (min-width: 520px) {
  .card { grid-template-columns: 1fr 1fr; }
}

 
    
  Imágenes y media responsivos 
  Evita desbordes y mantiene proporciones estables.
    
  1 
 Usa max-width: 100% y height: auto para imágenes fluidas.
 
 
  2 
 aspect-ratio mantiene la proporción y evita saltos de layout.
 
 
   Imágenes fluidas
.media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

    1  Mentalidad responsive: fluido primero   2  Unidades fluidas y escalas   3  Media queries modernas (range syntax)   4  Sintaxis antigua vs moderna   5  Breakpoints con intención   6  Preferencias del usuario   7  Interacción y dispositivos   8  Features de dispositivo   9  Layouts flexibles con Flex y Grid   10  Container queries   11  Imágenes y media responsivos

      🧪 Aprende probando 
     
Ejemplo
  Layout fluido con clamp()   Ajusta tipografía y padding con clamp para que el diseño respire en cualquier pantalla.  
 
⌄
 
   
 
   
Ejemplo
  Breakpoints con range syntax   Ajusta columnas con la notación moderna.  
 
⌄
 
   
 
   
Ejemplo
  Grid auto-fit   Crea un grid de tarjetas que se reacomoda solo.  
 
⌄
 
   
 
   
Ejemplo
  Container query en tarjetas   La tarjeta cambia su layout según el contenedor.  
 
⌄
 
   
 
   
Ejemplo
  Imagen fluida con ratio   Comprueba cómo una imagen se adapta sin deformarse.  
 
⌄
 
   
 
   
Ejemplo
  Orientation y resolución   Cambia la orientación del dispositivo o simula DPI alto.  
 
⌄
 
   
 
 
 
 
 
      🏁 Retos 
     
Reto
  Reto: titular fluido y proporcional   Usa clamp() y container queries en un hero.  
 
⌄
 
   
 
   
Reto
  Reto: breakpoint moderno   Dos columnas desde 768px.  
 
⌄
 
   
 
   
Reto
  Reto: prefers-color-scheme   Modo oscuro con media query.  
 
⌄
 
   
 
 
 
 
 
     🧰 Recursos 
     
Enlaces útiles
   Web.dev Responsive Design  CSS Tricks Responsive Design  MDN Media Queries  MDN Container Queries  MDN clamp()  
 
  
Test
 
Comprueba tus conocimientos con un test sobre  CSS.
  Test de CSS  
 
 
      CodePen: Layout responsive 
 
Abrir en CodePen
 
  
 
 
 
 
      Recursos del curso   78  
   📘 Glosario  🎧 Audios  📄 PDFs  🖼️ Infografías  🎬 Vídeos  🔗 Enlaces  🧠 Flashcards  🧩 Snippets  
 
  
‹
  
Lección  41 
  Media Queries y diseño responsive 
 
    
Lección  43 
  Container Queries: componentes realmente responsivos 
 
 
›