CSS3 Consultas de medios
tipos de medios CSS2
@media regla se describe en CSS2, y se puede personalizar para los diferentes tipos de medios de comunicación diferentes reglas de estilo.
Por ejemplo: Se pueden establecer diferentes reglas de estilo para diferentes tipos de medios (incluyendo pantallas, dispositivos portátiles, televisores, etc.).
Pero este tipo de soporte multimedia en muchos dispositivos suficientes todavía amistosos.
CSS3 Consultas de medios
CSS3 consulta multimedia hereda todos los tipos de medios de CSS2 pensamiento: En lugar de encontrar el tipo de equipo, la configuración de pantalla de CSS3 de acuerdo con la adaptación.
Las consultas de medios se pueden utilizar para detectar muchas cosas, tales como:
- la ventana gráfica (ventanas) de ancho y la altura
- Anchura y la altura del aparato
- Hacia (teléfono inteligente de pantalla horizontal, vertical de la pantalla).
- resolución
En la actualidad, muchos para el teléfono de Apple, teléfono Android, tabletas y otros dispositivos se usarán para mostrar la consulta.
Soporte para el navegador
Las cifras de la tabla representan el primer navegador compatible con el número de versión de propiedad.
| propiedad | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
sintaxis de consulta multimedia
consulta multimedia compuesto por una variedad de medios, puede contener uno o más expresiones, la expresión se establece de acuerdo a las condiciones devuelve verdadero o falso.
@media not|only mediatype and (expressions) {
CSS-Code;
}
Si los medios de comunicación especificada Tipo de relación del tipo de dispositivo, la consulta devuelve cierto, el documento muestra el efecto del estilo especificado en el dispositivo de juego.
A menos que utilice no sólo el operador o de otro modo, todos los estilos se adaptará la pantalla en todos los dispositivos.
No: no se utilizará para excluir ciertos dispositivos, tales como @media no imprime (el equipo no impresión).
solamente: para establecer algunos tipos de medios especiales.El apoyo a los medios de comunicación de consultas de los dispositivos móviles, si sólo hay una palabra clave, el navegador web para dispositivos móviles ignorarán la única palabra clave y la expresión después de la aplicación directamente desde el archivo de estilo. Para consultas de los medios de comunicación cuando el dispositivo no es compatible con la capacidad de leer, pero Soporte de impresión tipo de navegador de Internet, la palabra clave se encontró sólo ignora este archivo estilo.
todo: todos los dispositivos, debe ver siempre.
También puede utilizar un estilo diferentes archivos en diferentes medios de comunicación:
tipos de medios CSS3
| valor | descripción |
|---|---|
| todos | Se utiliza para todo tipo de dispositivos multimedia |
| impresión | para las impresoras |
| pantalla | Para las pantallas de ordenador, tabletas, teléfonos inteligentes. |
| discurso | Para los lectores de pantalla |
Ejemplos sencillos de investigación multimedia
Utilización de consultas multimedia se puede utilizar para reemplazar el estilo original correspondiente al estilo en el dispositivo especificado.
Los siguientes ejemplos cambian los colores de fondo en el tamaño de la ventana visible de pantalla mayor que 480 píxeles equipos:
Los siguientes ejemplos son visibles en el tamaño de la ventana de pantalla mayor que 480 píxeles flotarán a la página de menú de la izquierda:
Ejemplos
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px; }
}
Trate »
CSS3 referencia @media
Descubre más contenido multimedia puede referirse @media reglas.