W3docs
es
Iniciar sesión

Regla CSS @media

Usa la regla @media para aplicar estilos según media queries. Aprende a utilizarla con ejemplos prácticos.

La regla at-rule @media aplica un bloque de estilos únicamente cuando una media query se evalúa como verdadera — por ejemplo, solo en pantallas más estrechas que un teléfono, o solo cuando se imprime un documento. Es la base del diseño web responsivo: una sola hoja de estilos que se adapta a ordenadores de escritorio, portátiles, tabletas y teléfonos móviles en lugar de enviar un sitio diferente por dispositivo.

Esta página cubre la sintaxis de @media, los tipos de medios y las características de medios disponibles, cómo combinar condiciones con operadores lógicos, y ejemplos ejecutables que puedes redimensionar para ver el efecto.

Cómo se construye una media query

Una media query tiene dos partes:

  • Un tipo de medio opcional — all, print, screen o speech — que apunta a una categoría de dispositivo.
  • Una o más características de medios entre paréntesis, como (min-width: 768px), que comprueban una condición como el width del viewport, su height, orientación o resolución.

Si el tipo de medio coincide con el dispositivo actual y cada característica se evalúa como verdadera, los estilos dentro del bloque se aplican. Una característica de medios se parece a una propiedad CSS (nombre: valor), pero comprueba una condición en lugar de aplicar estilo directamente a un elemento.

¿Cuándo usaría esto? Siempre que quieras que el diseño, el espaciado o la visibilidad cambien según el dispositivo — apilando columnas en teléfonos, ocultando una barra lateral en pantallas pequeñas, o eliminando colores de fondo cuando se imprime una página.

En JavaScript, la interfaz CSSMediaRule representa una única regla @media y puede usarse para leer o modificar reglas creadas con @media.

Sintaxis

CSS @media

@media <media-query> {
  /* styles */
}

Las media queries pueden combinar múltiples condiciones usando operadores lógicos: and, not, only y una coma (,).

Ejemplo de la regla @media:

CSS @media code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #1c87c9;
      }
      @media screen and (max-width: 411px) {
        body {
          background-color: #cce5ff;
        }
      }
      @media screen and (min-width: 768px) {
        body {
          background-color: #eee;
        }
      }
      @media screen and (max-width: 962px) and (min-width: 450px),
      (min-width: 1366px) {
        body {
          background-color: #333;
        }
      }
    </style>
  </head>
  <body>
    <h2>@media rule example</h2>
    <p>Resize the browser to see the effect.</p>
    <p>The background color changes based on the viewport width: light blue for screens up to 411px, light gray for 768px and wider, and dark gray for screens between 450px and 962px, or 1366px and wider.</p>
  </body>
</html>
Pruébalo tú mismo »

Resultado

CSS @media múltiples consultas

En el siguiente ejemplo, cuando el ancho del navegador está entre 500 y 800 px o es superior a 1000 px, la apariencia del <div> cambia. Redimensiona la ventana del navegador para ver el efecto.

Ejemplo de la regla @media con apariencia modificada de <div>:

CSS @media multiple queries example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #1c87c9;
      }
      @media screen and (min-width: 200px) {
        body {
          background-color: #8ebf42;
        }
      }
      @media screen and (min-width: 600px) {
        body {
          background-color: #ccc;
        }
      }
      @media screen and (max-width: 800px) and (min-width: 500px),
      (min-width: 1000px) {
        div.box {
          font-size: 50px;
          padding: 50px;
          border: 8px solid #000;
          background: #eee;
        }
      }
    </style>
  </head>
  <body>
    <h2>@media rule example</h2>
    <p>Media queries set the background-color to grey if the viewport is 600 pixels wide or wider, to green if the viewport is between 200 and 599 pixels wide. If the viewport is smaller than 200 pixels, the background-color is blue.</p>
    <h3>Change the appearance of DIV on different screen sizes</h3>
    <div class="box">DIV</div>
  </body>
</html>
Pruébalo tú mismo »

Combinación de condiciones con operadores lógicos

Las media queries pueden encadenar múltiples condiciones:

  • and — todas las condiciones deben ser verdaderas: @media screen and (min-width: 768px).
  • , (coma) — actúa como or; los estilos se aplican si cualquier consulta separada por coma coincide: @media (max-width: 600px), (min-width: 1200px).
  • not — niega una consulta completa: @media not all and (monochrome).
  • only — oculta la consulta de navegadores muy antiguos que no entienden las características de medios; no tiene efecto en los navegadores modernos, pero es inofensivo incluirlo.

Tipos de medios

ValorDescripción
allEste valor se utiliza para todos los dispositivos. Es el valor por defecto de esta propiedad.
printSe utiliza para impresoras.
screenSe utiliza para pantallas de ordenador en color.
speechSe utiliza para altavoces.

Ejemplo de uso de media para ocultar un elemento en dispositivos muy pequeños:

CSS @media Rule

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <style>
      @media (max-width: 767px) {
        .hide-mobile {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <h1>Hi</h1>
    <p>There is some text for example.</p>
    <p class="hide-mobile">This text will be hidden on large devices.</p>
    <p>There is some text for example.</p>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de uso de media para cambiar el color de fondo del contenido en diferentes dispositivos.

CSS @media Rule

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @media screen and (max-width: 767px) {
        .content {
          background-color: lightblue;
          padding: 30px;
        }
      }
      @media screen and (min-width: 768px) {
        .content {
          background-color: pink;
          padding: 10px;
        }
      }
      @media screen and (min-width: 800px) {
        .content {
          background-color: lightgreen;
          color: white;
          padding: 50px;
        }
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h2>Resize the browser to see the effect.</h2>
      <p>
        CSS is a rule-based language, which means that you define
        rules specifying groups of styles applying to particular
        elements or groups of elements on the web page.
      </p>
    </div>
  </body>
</html>
Pruébalo tú mismo »

Características de medios

Las características de medios comprueban una característica específica del dispositivo o del viewport. Con diferencia, las más comunes en el diseño responsivo cotidiano son las basadas en width — min-width y max-width — pero la lista completa a continuación cubre desde la orientación del dispositivo hasta la profundidad de color y el mecanismo de entrada. Las características de rango (width, height, aspect-ratio, color, resolution, monochrome) también aceptan los prefijos min- y max-.

ValorDescripción
widthEl ancho del viewport.
heightLa altura del viewport.
orientationLa orientación del viewport.
aspect-ratioLa relación entre el valor de la característica de medios "width" y el valor de la característica de medios "height".
gridConsulta si el dispositivo de salida es de cuadrícula o de mapa de bits.
colorEl número de bits por componente de color del dispositivo de salida. Si el dispositivo no es de color, el valor es 0.
color-gamutEl rango aproximado de colores que son compatibles con el agente de usuario y el dispositivo de salida.
inverted-colorsConsulta si el navegador o el sistema operativo subyacente invierte los colores o no.
hoverConsulta si el mecanismo de entrada principal permite al usuario pasar el cursor sobre elementos o no.
any-hoverConsulta si el mecanismo de entrada disponible permite al usuario pasar el cursor sobre elementos o no.
any-pointerConsulta si el mecanismo de entrada disponible es un dispositivo señalador o no.
light-levelEl nivel de luz del entorno.
max-aspect-ratioLa relación máxima entre el ancho y la altura del área de visualización.
max-colorEl número máximo de bits por componente de color para el dispositivo de salida.
max-heightLa altura máxima del área de visualización.
max-monochromeEl número máximo de bits por color en un dispositivo monocromático.
max-resolutionLa resolución máxima del dispositivo.
max-widthEl ancho máximo del área de visualización.
min-aspect-ratioLa relación mínima entre el ancho y la altura del área de visualización.
min-colorEl número mínimo de bits por componente de color para el dispositivo de salida.
min-heightLa altura mínima del área de visualización.
min-monochromeEl número mínimo de bits por color en un dispositivo monocromático.
min-resolutionLa resolución mínima del dispositivo.
min-widthEl ancho mínimo del área de visualización.
overflow-blockConsulta cómo el dispositivo de salida maneja el contenido que desborda el viewport a lo largo del eje de bloque.
overflow-inlineConsulta si el contenido que desborda el viewport a lo largo del eje en línea puede desplazarse o no.
pointerConsulta si el mecanismo de entrada principal es un dispositivo señalador o no.
resolutionDescribe la resolución del dispositivo de salida.
scriptingConsulta si los scripts están disponibles o no.
updateConsulta con qué rapidez el dispositivo de salida puede modificar la apariencia del contenido.

Práctica

Práctica
¿Cuáles son las funciones de las media queries en CSS?
¿Cuáles son las funciones de las media queries en CSS?
Was this page helpful?