La consulta de medios en CSS se utiliza para crear un diseño web receptivo. Significa que la vista de una página web difiere de un sistema a otro según la pantalla o los tipos de medios. El punto de interrupción especifica para qué tamaño de ancho de dispositivo, el contenido comienza a romperse o deformarse.
Las consultas de medios se pueden usar para verificar muchas cosas:
- ancho y alto de la ventana gráfica
- ancho y alto del dispositivo
- Orientación
- Resolución
Una consulta de medios consta de un tipo de medio que puede contener una o más expresiones que pueden ser verdaderas o falsas. El resultado de la consulta es verdadero si el medio especificado coincide con el tipo de dispositivo en el que se muestra el documento. Si la consulta de medios es verdadera, se aplica una hoja de estilo.
Sintaxis:
@media not | only mediatype and (expression) {
// Code content
}
Ejemplo: este ejemplo ilustra la consulta de medios CSS con diferentes anchos de dispositivo para que responda.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS media query</title>
<style>
body {
text-align: center;
}
.gfg {
font-size: 40px;
font-weight: bold;
color: green;
}
@media screen and (max-width:800px) {
body {
text-align: center;
background-color: green;
}
.gfg {
font-size: 30px;
font-weight: bold;
color: white;
}
.geeks {
color: white;
}
}
@media screen and (max-width:500px) {
body {
text-align: center;
background-color: blue;
}
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">A computer science portal for geeks</div>
</body>
</html>
Salida: a partir de la salida, podemos ver que si el ancho máximo de la pantalla se reduce a 800 px, el color de fondo cambia a verde y si el ancho máximo de la pantalla se reduce a 500 px, el color de fondo se vuelve azul. . Para el ancho del tamaño del escritorio, el color de fondo será blanco.
Tipos de medios en CSS: hay muchos tipos de medios que se enumeran a continuación:
- all: se utiliza para todos los dispositivos multimedia
- print: Se utiliza para impresora.
- pantalla: Se utiliza para pantallas de computadora, teléfonos inteligentes, etc.
- Speech: se utiliza para lectores de pantalla que leen la pantalla en voz alta.
Características de la consulta de medios: hay muchas características de la consulta de medios que se enumeran a continuación:
- color: el número de bits por componente de color para el dispositivo de salida.
- grid: Comprueba si el dispositivo es grid o bitmap.
- altura: La altura de la ventana gráfica.
- relación de aspecto: La relación entre el ancho y la altura de la ventana gráfica.
- índice de color: el número de colores que el dispositivo puede mostrar.
- resolución máxima: La resolución máxima del dispositivo usando dpi y dpcm.
- Monocromo: El número de bits por color en un dispositivo monocromático.
- escanear: El escaneo de los dispositivos de salida.
- actualización: qué tan rápido puede modificar el dispositivo de salida.
- ancho: El ancho de la ventana gráfica.
Navegadores compatibles: los navegadores compatibles con CSS media query se enumeran a continuación:
- Chrome 21.0 y superior
- Mozilla 3.5 y superior
- Microsoft Edge 12.0
- Ópera 9.0 y superior
- Internet Explorer 9.0 y superior
- Safari 4.0 y superior
Publicación traducida automáticamente
Artículo escrito por SrishtiGoel y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA