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.