Regla @media de CSS

Definición y uso

La regla @media se utiliza en las consultas de medios para aplicar diferentes estilos a diferentes tipos de medios / dispositivos.

Las consultas de medios se pueden usar para verificar muchas cosas, como:

  • Ancho y altura de la vista
  • Ancho y altura del dispositivo
  • Orientación (¿está en modo horizontal o vertical el teléfono o la tableta?)
  • Resolución

El uso de consultas de medios es una técnica popular para proporcionar estilos de hoja de estilo personalizados para computadoras de escritorio, laptops, tabletas y teléfonos móviles (diseño web responsivo).

Usted también puede usar consultas de medios para especificar estilos que solo se aplican a documentos de impresión o lectores de pantalla (mediatype: impresión, pantalla o voz).

Además de los tipos de medios, hay características de los medios. Las características de los medios proporcionan más detalles específicos para las consultas de medios al permitir probar las características específicas del agente de usuario o del dispositivo de visualización. Por ejemplo, puedes aplicar estilos solo a pantallas que sean más grandes o más pequeñas que un ancho específico.

Véase también:

Tutorial CSS:Consulta de medios de CSS

Tutorial CSS:Ejemplo de consulta de medios CSS

Tutorial RWD:Lograr un diseño web responsivo mediante consultas de medios

Manual de referencia de JavaScript:Método window.matchMedia()

Ejemplo

Ejemplo 1

Si el ancho de la ventana del navegador es de 600px o menos, cambia el color de fondo del elemento <body> a "azul claro":

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

pruebe usted mismo

Puedes encontrar más ejemplos TIY en la parte inferior de la página.

Sintaxis de CSS

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

Significado de not, only y and:

not: La palabra clave not invierte el significado de toda la consulta de medios.

only: La palabra clave only evita que los navegadores de versión antigua apliquen los estilos especificados, que no admiten consultas de medios con características de medios. No tiene efecto en los navegadores modernos.

and: La palabra clave and combina las características de los medios con los tipos de medios u otras características de los medios.

Son opcionales. Sin embargo, si se usa not o only, también se debe especificar el tipo de medio.

También puedes usar diferentes hojas de estilo para diferentes medios, como en este caso:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

Tipo de medio

Valor Descripción
all Por defecto. Usado para todos los tipos de dispositivos de medios.
print Usado en impresoras.
screen Usado en pantallas de computadora, tabletas, smartphones y otros.
speech Usado por los lectores de pantalla para la lectura de la página.

Características de los medios

Valor Descripción
any-hover

¿Existe algún mecanismo de entrada disponible que permita al usuario (como el ratón) mantenerse en la posición sobre un elemento?

Agregado en Media Queries Level 4.
any-pointer

¿Existe algún dispositivo de entrada de puntero en los mecanismos de entrada disponibles, y si es así, ¿cuál es su precisión?

Agregado en Media Queries Level 4.
aspect-ratio La relación ancho-alto del viewport (vista de la ventana).
color

El valor de bits por píxel del dispositivo de salida, comúnmente 8, 16, 32 bits.

Si el dispositivo no admite la salida de colores, este valor es 0.
color-gamut

El rango de colores soportado aproximadamente por el agente de usuario y el dispositivo de salida.

Agregado en Media Queries Level 4.
color-index

El número de entradas en la tabla de consulta de colores (color lookup table) del dispositivo de salida.

Si el dispositivo no utiliza la tabla de consulta de colores, este valor es 0.
device-aspect-ratio

La relación ancho-alto del dispositivo de salida.

Se ha desechado en Media Queries Level 4.
device-height

La altura de la superficie de renderización del dispositivo de salida (como la pantalla).

Se ha desechado en Media Queries Level 4.
device-width

El ancho de la superficie de renderización del dispositivo de salida (como la pantalla).

Se ha desechado en Media Queries Level 4.
display-mode

El modo de visualización de la aplicación, como especificado por el miembro display del manifest de web app.

Definido en la spec del Web App Manifest.
forced-colors

¿Restringen los usuarios代理 los paletas de colores?

Agregado en Media Queries Level 5.
grid ¿Usa la pantalla de malla o la pantalla de matriz el dispositivo de salida?
height La altura del viewport (vista de la ventana).
hover

¿Permite el mecanismo de entrada principal al usuario dejar el cursor sobre el elemento?

Agregado en Media Queries Level 4.
inverted-colors

¿Reversa el navegador o el sistema operativo subyacente los colores?

Agregado en Media Queries Level 5.
light-level

El nivel actual del nivel de iluminación del entorno.

Agregado en Media Queries Level 5.
max-aspect-ratio La proporción máxima entre el ancho y la altura de la zona de visualización.
max-color El número máximo de bits para cada componente de color en el dispositivo de salida.
max-color-index El número máximo de colores que puede mostrar el dispositivo.
max-height La altura máxima de la zona de visualización, por ejemplo, la ventana del navegador.
max-monochrome El número máximo de bits para cada "color" en dispositivos monocromáticos (en escala de grises).
max-resolution La resolución máxima del dispositivo, expresada en dpi o dpcm.
max-width El ancho máximo de la zona de visualización, por ejemplo, la ventana del navegador.
min-aspect-ratio La proporción mínima entre el ancho y la altura de la zona de visualización.
min-color El número mínimo de bits para cada componente de color en el dispositivo de salida.
max-color-index El número máximo de colores que puede mostrar el dispositivo.
min-height La altura mínima de la zona de visualización, por ejemplo, la ventana del navegador.
min-monochrome El número mínimo de bits para cada "color" en dispositivos monocromáticos (en escala de grises).
min-resolution Resolución mínima del dispositivo, utilizando dpi o dpcm.
min-width Ancho mínimo de la área de visualización, por ejemplo, la ventana del navegador.
monochrome

Profundidad de bits de cada píxel en el búfer de frame monocromático del dispositivo de salida.

Si el dispositivo no es una pantalla en blanco y negro, el valor es 0.
orientation Dirección de rotación de la ventana de visualización (modo horizontal o vertical).
overflow-block

Cómo maneja el dispositivo de salida el contenido que se desborda en el eje de bloque de la ventana de visualización (viewport).

Agregado en Media Queries Level 4.
overflow-inline

¿Se puede desplazar el contenido que se desborda en el eje en línea de la ventana de visualización (viewport)?

Agregado en Media Queries Level 4.
pointer

¿Es el mecanismo de entrada principal un dispositivo de puntero? Si es así, ¿cuál es su precisión?

Agregado en Media Queries Level 4.
prefers-color-scheme

Detectar si el usuario prefiere un esquema de colores claro o oscuro.

Agregado en Media Queries Level 5.
prefers-contrast

Detectar si el usuario ha solicitado aumentar o disminuir la contraste entre colores similares.

Agregado en Media Queries Level 5.
prefers-reduced-motion

¿Desea el usuario que haya menos efectos dinámicos en la página?

Agregado en Media Queries Level 5.
prefers-reduced-transparency

¿Preferiría el usuario una transparencia más baja?

Agregado en Media Queries Level 5.
resolution Resolución del dispositivo de salida, utilizando dpi o dpcm.
scan Proceso de escaneo del dispositivo de salida (aplicable a televisores, etc.).
scripting

Detectar si el scripting (por ejemplo, JavaScript) está disponible.

Agregado en Media Queries Level 5.
update

Frecuencia con la que el dispositivo de salida actualiza el resultado de la renderización del contenido.

Agregado en Media Queries Level 4.
width Ancho de la ventana de visualización (viewport).

Más ejemplos

Ejemplo 2

Al ser el ancho del navegador de 600px o menos, ocultar el elemento:

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

pruebe usted mismo

Ejemplo 3

Si el ancho de la ventana de visualización es de 800 píxeles o más ancho, utilice la consulta de medios para establecer el color de fondo en lavanda; si el ancho de la ventana de visualización está entre 400 y 799 píxeles, utilice la consulta de medios para establecer el color de fondo en verde claro. Si la ventana de visualización es menor de 400 píxeles, el color de fondo será azul claro:

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: verde claro;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavanda;
  }
}

pruebe usted mismo

Ejemplo 4

Cree un menú de navegación responsivo (muestra horizontalmente en grandes pantallas y verticalmente en pequeñas pantallas):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

pruebe usted mismo

ejemplo 5

Use consultas de medios para crear un diseño de columnas responsivo:

/* En pantallas de 992px o menos, cambia de cuatro columnas a dos columnas */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* En pantallas con un ancho de 600 píxeles o menos, los columnas se apilan en lugar de mostrarse en paralelo */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

pruebe usted mismo

ejemplo 6

Use consultas de medios para crear sitios web responsivos:

pruebe usted mismo

ejemplo 7

Las consultas de medios también se pueden usar para cambiar el diseño de la página según la orientación del navegador. Puede escribir un grupo de propiedades CSS que solo se aplican cuando el ancho de la ventana del navegador es mayor que su altura (es decir, la orientación 'horizontal').

Si la orientación está en modo de pantalla horizontal, utilice un fondo de color azul claro:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

pruebe usted mismo

ejemplo 8

Use consultas de medios para establecer el color del texto en verde cuando se muestra el documento en la pantalla y en negro cuando se imprime:

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

pruebe usted mismo

ejemplo 9

lista separada por comas: use comas para agregar otra consulta de medios a una consulta de medios existente (su comportamiento es similar al operador OR):

/* Cuando el ancho está entre 600px y 900px o mayor que 1100px, cambie el aspecto del <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

pruebe usted mismo

soporte del navegador

Los números en la tabla indican la versión del navegador que admite completamente las reglas @media.

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9