in

Regla CSS @media

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.


Soporte del navegador

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 ()

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Soporte para productos de oracleHospitality y Food & Beverage

Hashtable en Java – javatpoint