La consulta de medios en CSS se utiliza para crear un diseño web receptivo para hacer un sitio web fácil de usar. Significa que la vista de las páginas web difiere de un sistema a otro según la pantalla o los tipos de medios. Los medios nos permiten remodelar y diseñar la página de visualización del usuario del sitio web para dispositivos específicos como tabletas, computadoras de escritorio, teléfonos móviles, etc.
Las consultas de medios se pueden usar para verificar muchas cosas como las siguientes
- 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 el estilo. En palabras simples, utiliza la regla @media para agregar el bloque de propiedades CSS, según ciertas condiciones.
Sintaxis:
@media not | only mediatype and (expression)
{
// Code content
}
Podemos agregar el punto de interrupción para ver el ancho de la pantalla junto con el ancho y el alto de la ventana gráfica para los diferentes dispositivos. Un punto de interrupción es un punto o clave que determina cuándo cambiar el diseño remodelando y agregando nuevas reglas dentro de las consultas de medios. Hay algunos puntos de interrupción comunes, no una resolución estándar, que se pueden usar para los diferentes anchos y alturas de los dispositivos:
- Para dispositivos móviles: 320px-480px
- Para tabletas o iPad: 480px – 768px
- Para Laptop o pantalla pequeña: 768px -1024px
- Para escritorio o pantalla grande: 1024px -1200px
- Para dispositivo de tamaño extra grande:
cambiar el diseño de una página web que dependerá de la orientación del navegador.
Ejemplo: este ejemplo ilustra el uso de la consulta CSS Media para crear el diseño móvil primero especificando los diferentes anchos de dispositivo.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GeeksforGeeks CSS Media Query</title> <meta name="description" content="CSS Media Query for all devices like mobile, tablet, desktop etc."> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="gfg-style.css"> </head> <body> <div class="gfg-div">GeeksforGeeks</div> </body> </html>
Código CSS: el siguiente código CSS especifica las consultas de medios con diferentes propiedades de estilo según ciertas condiciones que se mostrarán según el tamaño del dispositivo.
CSS
* {
margin: 0;
padding: 0;
}
/* Default Design */
.gfg-div {
/* To make all elements center */
display: flex;
justify-content: center;
align-items: center;
/* Default Styling */
margin: 20px auto;
padding: 30px;
font-size: 30px;
width: 300px;
height: 300px;
background-color: darkseagreen;
color: black;
}
/* For Desktop View */
@media screen and (min-width: 1024px) {
.gfg-div {
background-color: #63c971;
color: #fff;
}
}
/* For Tablet View */
@media screen and (min-device-width: 768px)
and (max-device-width: 1024px) {
.gfg-div {
width: 400px;
height: 400px;
background-color: orange;
color: black;
}
}
/* For Mobile Portrait View */
@media screen and (max-device-width: 480px)
and (orientation: portrait) {
.gfg-div {
width: 200px;
height: 200px;
background-color: red;
color: #fff;
}
}
/* For Mobile Landscape View */
@media screen and (max-device-width: 640px)
and (orientation: landscape) {
.gfg-div {
width: 400px;
height: 200px;
background-color: cyan;
color: black;
}
}
/* For Mobile Phones Portrait or Landscape View */
@media screen and (max-device-width: 640px) {
.gfg-div {
width: 400px;
height: 200px;
background-color: chartreuse;
color: black;
}
}
/* For iPhone 4 Portrait or Landscape View */
@media screen and (min-device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
.gfg-div {
width: 400px;
height: 400px;
background-color: brown;
color: black;
}
}
/* For iPhone 5 Portrait or Landscape View */
@media (device-height: 568px) and (device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
.gfg-div {
width: 400px;
height: 400px;
background-color: cornflowerblue;
color: black;
}
}
/* For iPhone 6 and 6 plus Portrait or Landscape View */
@media (min-device-height: 667px) and (min-device-width: 375px)
and (-webkit-min-device-pixel-ratio: 3) {
.gfg-div {
width: 400px;
height: 400px;
background-color: darkgoldenrod;
color: black;
}
}
Producción:
Navegadores compatibles:
- Google Chrome
- Firefox
- Borde de Microsoft
- explorador de Internet
- Ópera
- Safari