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 JavaScriptpuede 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

Specification
Media Queries Level 3
Media Queries Level 4
Media Queries Level 5

Ver también

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