Ejemplo
Cambiar el color de fondo si la ventana es de 480 píxeles de ancho o más ancho:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
La regla @media se utiliza para definir diferentes reglas de estilo para diferentes tipos / dispositivos de medios.
En CSS2 esto se le llamaba tipos de medios, mientras que en CSS3 se llama preguntas de los medios.
Las consultas de medios se ven en la capacidad del dispositivo, y 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 (is the tablet/phone in landscape or portrait mode?)
- resolución
- y mucho más
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 | 9 | 3.5 | 4.0 | 9 |
sintaxis CSS
@media not|onlymediatype and (media feature){
CSS-Code;
}También puede tener diferentes hojas de estilo para diferentes medios de comunicación:
<link rel="stylesheet" media=" mediatype and|not|only ( media
feature )"
href=" mystylesheet.css ">Tipos de medios
| Valor | Descripción |
|---|---|
| all | Se utiliza para todos los dispositivos del tipo de medios |
| aural | Obsoleto. Se utiliza para la voz y sintetizadores de sonido |
| braille | Obsoleto. Se utiliza para los dispositivos de retroalimentación táctil en braille |
| embossed | Obsoleto. Se utiliza para las impresoras braille paginados |
| handheld | Obsoleto. Se utiliza para pequeños dispositivos de mano o |
| Se utiliza para impresoras | |
| projection | Obsoleto. Se utiliza para las presentaciones proyectadas, como diapositivas |
| screen | Se utiliza para las pantallas de ordenador, tabletas, teléfonos inteligentes, etc. |
| speech | Se utiliza para los lectores de pantalla que "reads" la página en voz alta |
| tty | Obsoleto. Se utiliza para los medios de comunicación utilizando una cuadrícula de caracteres de tamaño fijo, como teletipos y terminales |
| tv | Obsoleto. Se utiliza para dispositivos de tipo televisión |
Características de los medios
| Valor | Descripción |
|---|---|
| aspect-ratio | La relación entre la anchura y la altura de la ventana gráfica |
| color | El número de bits por componente de color para el dispositivo de salida |
| color-index | El número de colores, el dispositivo puede mostrar |
| device-aspect-ratio | La relación entre la anchura y la altura del dispositivo |
| device-height | La altura del dispositivo, tales como una pantalla de ordenador |
| device-width | La anchura del dispositivo, tales como una pantalla de ordenador |
| grid | Si el dispositivo es una rejilla o de mapa de bits |
| height | La altura de la ventana gráfica |
| max-aspect-ratio | La relación máxima entre la anchura y la altura de la zona de visualización |
| max-color | El número máximo de bits por componente de color para el dispositivo de salida |
| max-color-index | El número máximo de colores el dispositivo puede mostrar |
| max-device-aspect-ratio | La relación máxima entre la anchura y la altura del dispositivo |
| max-device-height | La altura máxima del dispositivo, tales como una pantalla de ordenador |
| max-device-width | La anchura máxima del dispositivo, tales como una pantalla de ordenador |
| max-height | La altura máxima de la zona de visualización, tal como una ventana del navegador |
| max-monochrome | El número máximo de bits por "color" en un blanco y negro (greyscale) dispositivo |
| max-resolution | La resolución máxima del dispositivo, utilizando ppp o dpcm |
| max-width | La anchura máxima de la zona de visualización, tal como una ventana del navegador |
| min-aspect-ratio | La relación mínima entre la anchura y la altura de la zona de visualización |
| min-color | El número mínimo de bits por componente de color para el dispositivo de salida |
| min-color-index | El número mínimo de colores el dispositivo puede mostrar |
| min-device-aspect-ratio | La relación mínima entre la anchura y la altura del dispositivo |
| min-device-width | La anchura mínima del dispositivo, tales como una pantalla de ordenador |
| min-device-height | La altura mínima del dispositivo, tal como una pantalla de ordenador |
| min-height | La altura mínima de la zona de visualización, tal como una ventana del navegador |
| min-monochrome | El número mínimo de bits por "color" en un blanco y negro (greyscale) dispositivo |
| min-resolution | La resolución mínima del dispositivo, utilizando ppp o dpcm |
| min-width | La anchura mínima de la zona de visualización, tal como una ventana del navegador |
| monochrome | El número de bits por "color" en un blanco y negro (greyscale) dispositivo |
| orientation | La orientación de la ventana gráfica (landscape or portrait mode) |
| overflow-block | ¿Cómo funciona el dispositivo de salida maneje contenido que desborda la vista a lo largo de los ejes de bloque (added in Media Queries Level 4) |
| overflow-inline | Puede contenido que desborda la vista a lo largo del eje de línea se desplazará (added in Media Queries Level 4) |
| resolution | La resolución del dispositivo de salida, utilizando dpi o dpcm |
| scan | El proceso de exploración del dispositivo de salida |
| update-frequency | ¿Con qué rapidez puede el dispositivo de salida de modificar la apariencia del contenido (added in Media Queries Level 4) |
| width | El ancho de la ventana gráfica |
Más ejemplos
Ejemplo
Use la regla @media para hacer el diseño de respuesta:
@media only screen and (max-width: 500px) {
.gridmenu
{
width:100%;
}
.gridmain
{
width:100%;
}
.gridright {
width:100%;
}
}
Inténtalo tú mismo " Páginas relacionadas
CSS tutorial: CSS Consultas de medios