Ejemplo
Cambie el color de fondo del elemento
a «azul claro» cuando la ventana del navegador tenga 600 px de ancho o menos: @media solo pantalla y (ancho máximo: 600px) {
cuerpo {
color de fondo: azul claro;
}
}
Inténtalo tú mismo »
Más ejemplos de «Pruébelo usted mismo» a continuación.
Definición y uso
los @media La regla se utiliza en consultas de medios para aplicar diferentes estilos para diferentes tipos de medios / dispositivos.
Las consultas de medios se pueden usar para verificar muchas cosas, como:
- ancho y alto de la ventana gráfica
- ancho y alto del dispositivo
- orientación (¿la tableta / teléfono está en modo horizontal o vertical?)
- resolución
El uso de consultas de medios es una técnica popular para entregar una hoja de estilo personalizada (diseño web receptivo) a computadoras de escritorio, portátiles, tabletas y teléfonos móviles.
También puede utilizar consultas de medios para especificar que ciertos estilos son solo para documentos impresos o para lectores de pantalla (tipo de medio: impresión, pantalla o voz).
Además de los tipos de medios, también hay funciones de medios. Las funciones de medios proporcionan detalles más específicos a las consultas de medios, al permitir probar una función específica del agente de usuario o dispositivo de visualización. Por ejemplo, puede aplicar estilos solo a aquellas pantallas que sean más grandes o más pequeñas que un cierto ancho.
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la regla @media.
| Propiedad | |||||
|---|---|---|---|---|---|
| @medios de comunicación | 21 | 9 | 3,5 | 4.0 | 9 |
Sintaxis CSS
@media no | solo tipo de medio y (característica de los medios y | o | no
mediafeature) {
Código CSS;
}
significado de la no, solamente y y palabras clave:
no: La palabra clave no invierte el significado de una consulta de medios completa.
solamente: La única palabra clave evita que los navegadores más antiguos que no admiten consultas de medios con funciones de medios apliquen los estilos especificados.
No tiene ningún efecto en los navegadores modernos.
y: La palabra clave y combina una función de medios con un tipo de medio u otras funciones de medios.
Todos son opcionales. Sin embargo, si usa no o
solamente, también debe especificar un tipo de medio.
También puedes tener diferentes hojas de estilo para diferentes medios, como este:
….
Tipos de medios
| Valor | Descripción |
|---|---|
| todos | Defecto. Se utiliza para todos los dispositivos de tipo multimedia. |
| impresión | Utilizado para impresoras |
| pantalla | Se utiliza para pantallas de computadora, tabletas, teléfonos inteligentes, etc. |
| habla | Se utiliza para lectores de pantalla que «leen» la página en voz alta. |
Funciones multimedia
| Valor | Descripción |
|---|---|
| en cualquier lugar | ¿Algún mecanismo de entrada disponible permite al usuario desplazarse sobre los elementos? (agregado en el nivel 4 de consultas de medios) |
| cualquier puntero | ¿Algún mecanismo de entrada disponible es un dispositivo señalador y, de ser así, qué precisión tiene? (agregado en el nivel 4 de consultas de medios) |
| relación de aspecto | La relación entre el ancho y el alto de la ventana gráfica. |
| color | El número de bits por componente de color para el dispositivo de salida. |
| gama de colores | El rango aproximado de colores que son compatibles con el agente de usuario y el dispositivo de salida (agregado en el nivel 4 de consultas de medios) |
| Indice de color | La cantidad de colores que puede mostrar el dispositivo |
| red | Si el dispositivo es una cuadrícula o un mapa de bits |
| altura | La altura de la ventana gráfica |
| flotar | ¿El mecanismo de entrada principal permite al usuario desplazarse sobre los elementos? (agregado en el nivel 4 de consultas de medios) |
| colores invertidos | ¿El navegador o el sistema operativo subyacente están invirtiendo los colores? (agregado en el nivel 4 de consultas de medios) |
| nivel de luz | Nivel de luz ambiental actual (agregado en el nivel 4 de consultas de medios) |
| relación de aspecto máxima | La relación máxima entre el ancho y la altura del área de visualización. |
| color máximo | El número máximo de bits por componente de color para el dispositivo de salida. |
| índice de color máximo | La cantidad máxima de colores que puede mostrar el dispositivo |
| Altura máxima | La altura máxima del área de visualización, como una ventana del navegador |
| max-monocromo | El número máximo de bits por «color» en un dispositivo monocromático (escala de grises) |
| resolución máxima | La resolución máxima del dispositivo, usando dpi o dpcm |
| anchura máxima | El ancho máximo del área de visualización, como una ventana del navegador |
| relación de aspecto mínima | La relación mínima entre el ancho y la altura del área de visualización |
| color mínimo | El número mínimo de bits por componente de color para el dispositivo de salida. |
| índice de color mínimo | La cantidad mínima de colores que puede mostrar el dispositivo |
| altura mínima | La altura mínima del área de visualización, como una ventana del navegador |
| min-monocromo | El número mínimo de bits por «color» en un dispositivo monocromático (escala de grises) |
| resolución mínima | La resolución mínima del dispositivo, usando dpi o dpcm |
| ancho mínimo | El ancho mínimo del área de visualización, como una ventana del navegador |
| monocromo | La cantidad de bits por «color» en un dispositivo monocromático (escala de grises) |
| orientación | La orientación de la ventana gráfica (modo horizontal o vertical) |
| bloque de desbordamiento | ¿Cómo maneja el dispositivo de salida el contenido que desborda la ventana gráfica a lo largo del eje del bloque (agregado en Media Queries Nivel 4)? |
| desbordamiento en línea | ¿Se puede desplazar el contenido que desborda la ventana gráfica a lo largo del eje en línea (agregado en el nivel 4 de consultas de medios) |
| puntero | ¿Es el mecanismo de entrada principal un dispositivo señalador y, de ser así, qué precisión tiene? (agregado en el nivel 4 de consultas de medios) |
| resolución | La resolución del dispositivo de salida, usando dpi o dpcm |
| escanear | El proceso de escaneo del dispositivo de salida |
| guion | ¿Están disponibles las secuencias de comandos (por ejemplo, JavaScript)? (agregado en el nivel 4 de consultas de medios) |
| actualizar | ¿Con qué rapidez puede el dispositivo de salida modificar la apariencia del contenido (agregado en Media Queries Nivel 4)? |
| ancho | El ancho de la ventana gráfica |
Más ejemplos
Ejemplo
Oculte un elemento cuando el ancho del navegador sea de 600 px de ancho o menos:
@media pantalla y (ancho máximo: 600px) {
div.example {
pantalla: ninguna;
}
}
Inténtalo tú mismo »
Ejemplo
Use mediaqueries para establecer el color de fondo en lavanda si la ventana tiene 800 píxeles de ancho o más, en verde claro si la ventana tiene entre 400 y 799 píxeles de ancho. Si la ventana gráfica tiene menos de 400 píxeles, el color de fondo es azul claro:
cuerpo {
color de fondo: azul claro;
}
@media pantalla y (ancho mínimo: 400px) {
cuerpo {
color de fondo: verde claro;
}
}
@media pantalla y (ancho mínimo: 800px) {
cuerpo {
color de fondo: lavanda;
}
}
Inténtalo tú mismo »
Ejemplo
Cree un menú de navegación receptivo (que se muestra horizontalmente en pantallas grandes y verticalmente en pantallas pequeñas):
@media pantalla y (ancho máximo: 600 px) {
.topnav a {
flotar: ninguno;
ancho: 100%;
}
}
Inténtalo tú mismo »
Ejemplo
Utilice consultas de medios para crear un diseño de columna receptivo:
/ * En pantallas de 992px de ancho o menos, pase de cuatro columnas a dos columnas * /
@media pantalla y (ancho máximo: 992px) {
.column {
ancho: 50%;
}
}
/ * En pantallas de 600px de ancho o menos, haga que las columnas se apilen una encima de la otra en lugar de una al lado de la otra * /
@media pantalla y (ancho máximo: 600px) {
.column {
ancho: 100%;
}
}
Inténtalo tú mismo »
Ejemplo
Las consultas de medios también se pueden utilizar para cambiar el diseño de una página según la orientación del navegador. Puede tener un conjunto de propiedades CSS que solo se aplicarán cuando la ventana del navegador sea más ancha que su altura, lo que se denomina orientación «horizontal».
Utilice un color de fondo azul claro si la orientación está en modo horizontal:
@media solo pantalla y (orientación: paisaje) {
cuerpo {
color de fondo: azul claro;
}
}
Inténtalo tú mismo »
Ejemplo
Utilice mediaqueries para establecer el color del texto en verde cuando el documento se muestra en la pantalla y en negro cuando se imprime:
@media pantalla {
cuerpo {
color verde;
}
}
@media print {
cuerpo {
de color negro;
}
}
Inténtalo tú mismo »
Ejemplo
Lista separada por comas: agregue una consulta de medios adicional a una ya existente, usando una coma (esto se comportará como un operador OR):
/ * Cuando el ancho está entre 600px y 900px O por encima de 1100px – cambia la apariencia de
@media pantalla y (ancho máximo: 900 px) y (ancho mínimo: 600 px), (ancho mínimo: 1100 px) {
div.example {
tamaño de fuente: 50px;
relleno: 50px;
borde: 8px negro sólido;
fondo: amarillo;
}
}
Inténtalo tú mismo »
páginas relacionadas
Tutorial de CSS: consultas de medios CSS
Tutorial de CSS: ejemplos de consultas de medios CSS
Tutorial de RWD: Diseño web receptivo con consultas de medios
Tutorial de JavaScript: el método window.matchMedia ()