Media queries

Las consultas de medios le permiten adaptar su sitio o aplicación dependiendo de la presencia o el valor de varias características y parámetros del dispositivo.

Son un componente clave del responsive design. Por ejemplo, una consulta de medios puede reducir el tamaño de la fuente en dispositivos pequeños, aumentar el relleno entre párrafos cuando se ve una página en modo vertical, o aumentar el tamaño de los botones en las pantallas táctiles.

En CSS, use la @ media at-rule para aplicar condicionalmente parte de una hoja de estilo en función del resultado de una consulta de medios. Use @ import para aplicar condicionalmente una hoja de estilo completa.

 

Consultas de medios en HTML

En HTML, las consultas de medios se pueden aplicar a varios elementos:

     En el atributo <link> media del elemento, definen los medios a los que se debe aplicar un recurso vinculado (normalmente CSS).
     En el atributo <source> media del elemento, definen los medios a los que se debe aplicar esa fuente. (Esto solo es válido dentro de los elementos <picture>.)
     En el atributo <style> del elemento media, definen los medios a los que se debe aplicar el estilo.

 

Consultas de medios en JavaScript

 

En JavaScript puede usar el método Window.matchMedia () para probar la ventana contra una consulta de medios. También puede usar MediaQueryList.addListener () para recibir notificaciones cada vez que cambie el estado de una consulta. Con esta funcionalidad, su sitio o aplicación puede responder a los cambios en la configuración, orientación o estado del dispositivo.

Puede obtener más información sobre el uso programático de consultas de medios en Pruebas de consultas de medios.

Referencias

At-rules

Guides

Usando consultas de medios
Presenta las consultas de los medios, su sintaxis y los operadores y las funciones de los medios que se utilizan para construir expresiones de consulta de los medios.
Probando las consultas de medios programáticamente
Describe cómo usar las consultas de medios en su código de JavaScript para determinar el estado de un dispositivo, y para configurar escuchas que notifican su código cuando cambian los resultados de las consultas de medios (como cuando el usuario gira la pantalla o cambia el tamaño del navegador).
Usando consultas de medios en accesibilidad
Conozca cómo Media Queries puede ayudar a los usuarios a comprender mejor su sitio web.

Especificaciones

Especificación Estado Comentario
Media Queries Level 5 Editor's Draft  
CSS Conditional Rules Module Level 3 Candidate Recommendation  
Media Queries Level 4 Candidate Recommendation  
Media Queries Recommendation  
CSS Level 2 (Revision 1) Recommendation Initial definition

Compatibilidades con navegadores

@media rule

BCD tables only load in the browser

Ver también

  • Use @ apoya para aplicar estilos que dependen del soporte del navegador para varias tecnologías CSS.