CSS2 Introducido Tipos de medios
El @media regla, introducida en CSS2, hizo posible definir diferentes reglas de estilo para diferentes tipos de medios.
Ejemplos: Usted podría tener un conjunto de reglas de estilo para pantallas, una para impresoras, una para dispositivos de mano, una para dispositivos de tipo televisión, y así sucesivamente.
Lamentablemente, estos tipos de medios nunca tuvieron mucho apoyo por medio de dispositivos, que no sean el tipo de soporte de impresión.
CSS3 presenta Consultas de medios
Las consultas de medios en CSS3 extender la idea de CSS2 tipos de medios: En lugar de buscar un tipo de dispositivo, se ven en la capacidad del dispositivo.
Las consultas de medios se pueden utilizar para comprobar muchas cosas, tales como:
- anchura y la altura de la ventana gráfica
- anchura y la altura del dispositivo
- orientación (es la tableta / teléfono en modo horizontal o vertical?)
- resolución
Utilizando preguntas de los medios son una técnica popular para la entrega de una hoja de estilo a medida para tabletas, iPhone y Androids.
Soporte para el navegador
Los números de la tabla especifica la primera versión del navegador que es totalmente compatible con la norma @media.
| Propiedad | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Medios Sintaxis de la consulta
Una consulta de medios consiste en un tipo de medio y puede contener uno o más expresiones, que se resuelven a ser verdadera o falsa.
@media not|onlymediatype and (expressions) {
CSS-Code;
}El resultado de la consulta es cierto si el tipo de medio especificado coincide con el tipo de dispositivo se muestra en el documento y todas las expresiones en la consulta de medios son ciertas. Cuando una consulta de medios es cierto, se aplican las reglas de hojas de estilo o estilo correspondiente, siguiendo las reglas normales de cascada.
A menos que utilice los operadores o no sólo, el tipo de soporte es opcional y el all se infiere tipo.
También puede tener diferentes hojas de estilo para diferentes medios de comunicación:
<link rel="stylesheet" media=" mediatype and|not|only ( expressions )"
href=" print.css ">Tipos de Medios CSS3
| Valor | Descripción |
|---|---|
| all | Se utiliza para todos los dispositivos del tipo de medios |
| Se utiliza para impresoras | |
| screen | Se utiliza para las pantallas de ordenador, tabletas, teléfonos inteligentes, etc. |
| speech | Se utiliza para los lectores de pantalla que "lee" la página en voz alta |
Consultas de medios sencillos ejemplos
Una forma de utilizar las consultas de medios es tener una sección CSS alternativo dentro de tu hoja de estilo.
En el siguiente ejemplo se cambia el background-color de verde claro si la ventana es de 480 píxeles de ancho o más ancho (si la ventana está a menos de 480 píxeles, el background-color será de color rosa):
Ejemplo
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Inténtalo tú mismo " El siguiente ejemplo muestra un menú que va a flotar a la izquierda de la página, si la ventana es de 480 píxeles de ancho o más ancho (si la ventana está a menos de 480 píxeles, el menú será en la parte superior del contenido):
Ejemplo
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left:216px;}
}
Inténtalo tú mismo " CSS3 @media Referencia
Para una descripción completa de todos los tipos de medios y / expresiones características, por favor mire la @media regla en nuestra referencia CSS.