Consultas de medios CSS
- Página anterior Flexbox CSS
- Página siguiente Ejemplo de consulta de medios CSS
CSS2 introdujo los tipos de medios
CSS2 introdujo @media Las reglas que permiten definir diferentes reglas de estilo para diferentes tipos de medios.
Por ejemplo: puede que tenga un conjunto de reglas de estilo para la pantalla del ordenador, un conjunto para la impresora, un conjunto para dispositivos portátiles, e incluso un conjunto para la televisión, etc.
Desafortunadamente, a excepción del tipo de medio de impresión, estos tipos de medios nunca han recibido soporte masivo de los dispositivos.
CSS3 introduce consultas de medios
Las consultas de medios en CSS3 expanden el concepto de tipos de medios en CSS2: en lugar de buscar el tipo de dispositivo, se centran en las capacidades del dispositivo.
Las consultas de medios se pueden usar para verificar很多东西, como:
- Ancho y altura de la vista
- Ancho y altura del dispositivo
- Orientación (si la tableta o el teléfono está en modo horizontal o vertical)
- Resolución
El uso de consultas de medios es una técnica popular que permite proporcionar hojas de estilos personalizadas para computadoras de escritorio, laptops, tabletas y teléfonos móviles (por ejemplo, iPhone y teléfonos Android).
Soporte del navegador
Los números en la tabla indican el soporte completo @media Versión del primer navegador que admite las reglas.
| Atributo | |||||
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Sintaxis de la consulta de medios
Una consulta de medios consta de un tipo de medio y puede incluir una o más expresiones que se pueden interpretar como verdadero o falso.
@media not|only mediatype and (expresiones) {
CSS-Code;
}
Si el tipo de medio especificado coincide con el tipo de dispositivo del documento que se está mostrando y todas las expresiones en la consulta de medios son verdaderas, el resultado de la consulta es verdadero. Cuando la consulta de medios es verdadera, se aplica la hoja de estilos o las reglas de estilo correspondientes y se siguen las reglas de cascada normales.
A menos que utilice los operadores not o only, el tipo de medio es opcional y implícito. all Tipos.
También puede usar diferentes hojas de estilos para diferentes tipos de medios:
<link rel="stylesheet" media="mediatype and|not|only (expresiones)" href="print.css">
Tipos de medios CSS3
| Valor | Descripción |
|---|---|
| all | Usado para todos los tipos de dispositivos de medios. |
| Usado para impresoras. | |
| screen | Usado en computadoras de pantalla, tabletas, smartphones y otros. |
| speech | Usado por los lectores de pantalla para “leer” el contenido de la página. |
Ejemplo simple de consulta de medios
Una forma de usar las consultas de medios es tener un fragmento CSS alternativo dentro de la hoja de estilos.
El siguiente ejemplo cambia el color de fondo a verde claro cuando el ancho de la vista es de 480 píxeles o más (si el ancho de la vista es menor de 480 píxeles, el color de fondo será rosa):
Ejemplo
@media pantalla y (ancho-mínimo: 480px) {}
body {
background-color: lightgreen;
}
}
El siguiente ejemplo muestra un menú, que se deslizará a la izquierda de la página si el ancho de la vista es de 480 píxeles o más (si el ancho de la vista es menor de 480 píxeles, el menú se colocará en la parte superior del contenido):
Ejemplo
@media pantalla y (ancho-mínimo: 480px) {}
#leftsidebar {ancho: 200px; flotar: izquierdo;}
#main {margen-izquierdo: 216px;}
}
Más ejemplos de consultas de medios
Para obtener más ejemplos de consultas de medios, visite la siguiente página:Ejemplo de MQ CSS.
Manual de referencia @media CSS
Para una descripción completa de todos los tipos de medios y características / expresiones, consulte nuestra Regla @media en la referencia CSS.
- Página anterior Flexbox CSS
- Página siguiente Ejemplo de consulta de medios CSS
