Apuntes css

¿Para qué quieres herencias cuando tienes !important?

Media Queries en CSS

El diseño adaptable (responsive design) permite que las páginas web se adapten a diferentes dispositivos, desde móviles hasta ordenadores de escritorio. Las media queries son la herramienta clave en CSS para aplicar estilos según el tamaño de pantalla, tipo de dispositivo, o características como la orientación. En esta lección aprenderás los conceptos básicos de media queries para crear diseños adaptables que se vean bien en cualquier contexto.

¿Qué son las Media Queries?

Una media query aplica estilos condicionalmente según características del dispositivo, como el ancho de pantalla (width), alto (height), o tipo (screen, print). Son esenciales para el diseño adaptable, asegurando que tu página sea funcional y atractiva en móviles, tablets, y escritorios.

@media tipo and (condición) {
    selector {
        propiedad: valor;
    }
}
p {
    font-size: 16px;
}
@media screen and (max-width: 600px) {
    p {
        font-size: 14px;
    }
}

En pantallas de 600px o menos, los párrafos usan una fuente más pequeña.

Propiedades comunes

  • Tamaños: font-size, padding, margin (usa rem, %).
  • Layouts: Cambiar flex-direction o grid-template-columns.
  • Visibilidad: Usar display: none para ocultar elementos.
.contenedor {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
@media screen and (max-width: 600px) {
    .contenedor {
        flex-direction: column;
    }
}

Enfoque Mobile-First

El enfoque mobile-first define estilos base para pantallas pequeñas y luego añade media queries para pantallas más grandes (usando min-width). Es más eficiente y mejora el rendimiento en móviles.

/* Estilos base (móviles) */
.contenedor {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

/* Pantallas grandes */
@media screen and (min-width: 768px) {
    .contenedor {
        grid-template-columns: repeat(3, 1fr);
    }
}

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Media Queries</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: #f0f0f0;
        }
        .contenedor {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }
        .item {
            background: #ADD8E6;
            padding: 15px;
            text-align: center;
        }
        @media screen and (min-width: 768px) {
            .contenedor {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        @media screen and (max-width: 480px) {
            .item {
                font-size: 14px;
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <h1>Diseño Responsivo</h1>
    <div class="contenedor">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Buenas prácticas

Accesibilidad:

  • Usa tamaños de fuente legibles (rem, %) en móviles.
  • Asegura suficiente contraste.
  • Evita ocultar contenido esencial en ciertas pantallas.

Diseño adaptable:

  • Usa unidades relativas (rem, vw, %).
  • Combina con Flexbox y Grid para layouts flexibles.
  • Prioriza mobile-first para mejor rendimiento.

Rendimiento:

  • Minimiza estilos complejos en media queries.
  • Prefiere min-width cuando sea posible.

Compatibilidad:

  • Media queries son soportadas en todos los navegadores modernos.
  • No necesitas prefijos para CSS3.
TOP