consulta @media CSS3

Ejemplos

Si el documento de anchura inferior a 300 píxeles es modificar la presentación de fondo (background-color):

@media pantalla y (max-width: 300px) {
body {
background-color: azul claro;
}
}

Definiciones y uso

Utilice @media consultas, se pueden definir diferentes estilos para diferentes tipos de medios.

@media se pueden establecer para diferentes tamaños de pantalla diferentes estilos, especialmente si tiene que establecer páginas de diseño que responden, @ los medios de comunicación es muy útil.

Cuando se restablece el tamaño del navegador del proceso, se volverá a mostrar la página de la página en función de la anchura y la altura del navegador.

Soporte para el navegador

Las cifras de la tabla indican las reglas de apoyo @media primer número de la versión del navegador.

regla
@media	21	9	3.5	4.0	9

sintaxis CSS

@media MediaType y | no | únicamente (función de medios) {
CSS-Code;
}

También puede utilizar diferentes hojas de estilo para diferentes medios de comunicación:

Tipo de soporte

valor	descripción
todos	Para todos los dispositivos
auditivo	Obsoleta. Para el habla y el sintetizador de voz
braille	Obsoleta. equipos Braille utilizado en contacto con realimentación
en relieve	Obsoleta. aparato de impresión para la impresión a ciegas
de mano	Obsoleta. Para dispositivos de mano o dispositivos más pequeños, como PDA y el teléfono pequeño
impresión	Para las impresoras y la vista preliminar
proyección	Obsoleta. Para el equipo de proyección
pantalla	Para las pantallas de ordenador, tablet PC, teléfonos inteligentes y similares.
discurso	Aplicado a los lectores de pantalla y otros equipos de sonido
TTY	Obsoleta. Para la fijación de la rejilla de carácter, tales como el telégrafo, el equipo terminal y el carácter limitado del dispositivo portátil
TV	Obsoleta. Para TV y Web TV

características de los medios

valor	descripción
relación de aspecto	Definir el dispositivo de salida en la región visible del ancho de página y la altura
color	Definir el dispositivo de salida de cada grupo el número de la original en color. Si no es un dispositivo de color, el valor es igual a 0
el color-índice	El número de entradas en la tabla de consulta de color está definido en el dispositivo de salida. Si no se utiliza una tabla de consulta de color, el valor es igual a 0
dispositivo de relación de aspecto	dispositivo de salida de definición de pantalla ancho visible a altura.
dispositivo de altura	dispositivo de salida de definición de la pantalla altura visible.
dispositivo de ancho	dispositivo de salida de definición de pantalla ancho visible.
cuadrícula	dispositivo de salida utilizado para consultar si la rejilla o celosía.
altura	Definir el dispositivo de salida en la región visible de la altura de página.
max-relación de aspecto	dispositivo de salida de definición de la pantalla visible máxima relación entre anchura y altura.
max color	Definir el número máximo de dispositivos de salida de cada juego de color original.
max color-índice	El número máximo de entradas de la tabla de consulta de colores se define en el dispositivo de salida.
max-device-relación de aspecto	dispositivo de salida de definición de la pantalla visible máxima relación entre anchura y altura.
max-dispositivo de altura	Pantalla definen los dispositivos de salida visibles a la altura máxima.
max-device-ancho	dispositivo de salida de definición de la pantalla anchura máxima visible.
max-height	Definir el dispositivo de salida en la región visible de la altura máxima de la página.
max-monocromática	Se define en un marco monocromo tampón contiene por píxel es el número máximo de monocromo inicial.
max-resolución	La resolución máxima define el dispositivo.
de ancho máximo	Definir el dispositivo de salida en la región visible de la anchura máxima de la página.
min-relación de aspecto	Definir el dispositivo de salida en el área de la página relación mínima visible de la anchura y la altura.
min color	Definir el dispositivo de salida de cada número mínimo establecido de la original en color.
min color-índice	El número mínimo de entradas en la tabla de consulta de colores se define en el dispositivo de salida.
min-dispositivo de relación de aspecto	Pantalla definen la relación mínima dispositivos de salida visible de la anchura y la altura.
min-dispositivo de ancho	dispositivos de salida de pantalla definen anchura mínima visible.
min-dispositivo de altura	definir mínimo pantalla de altura visible del dispositivo de salida.
min-height	Definir el dispositivo de salida en la región visible de la altura mínima de la página.
min-monocromática	El número mínimo de originales en color se define en una memoria intermedia de cuadros en blanco y negro contiene por píxel
min-resolución	La resolución mínima define el dispositivo.
min-width	Definir el dispositivo de salida en la región visible de la anchura mínima de la página.
monocromo	Se define en una memoria intermedia de cuadros en blanco y negro monocromo contiene por píxel número original. Si no es un dispositivo monocromo, el valor es igual a 0
orientación	Definir el dispositivo de salida en la región visible de la altura de página es mayor que o igual a la anchura.
resolución	Definir la resolución del dispositivo. Tales como: 96 ppp, 300 ppp, 118dpcm
tomografía	Proceso de digitalización Tipo de TV de definición de los equipos.
ancho	Definir el dispositivo de salida en la región visible del ancho de página.