CSS Media Query y Diseño Responsive
El 90% del tráfico en la web proviene de dispositivos móviles. Por eso, los sitios web deben contar con un diseño responsive adecuado para su uso en móviles, y la estructura de media queries en CSS juega un papel fundamental en este sentido.
La estructura de media queries se utiliza para mostrar el contenido de las pantallas grandes de manera adecuada en pantallas pequeñas, o para evitar que el contenido de la página se desborde y genere desplazamiento en diferentes tamaños de pantalla. Al programar sitios web, estos se optimizan con códigos CSS responsive según distintos tamaños de pantalla móvil.
Con las media queries, los códigos CSS pueden aplicarse a los elementos HTML en anchos de pantalla específicos.
Por ejemplo, mientras las etiquetas <p> tienen un tamaño de 17 píxeles en una página, el tamaño de fuente de la etiqueta <p> puede configurarse en 14 píxeles para mantener la proporción en pantallas de menos de 600 píxeles.
Media Query con Min-width
Cuando se utiliza min-width, los códigos CSS escritos dentro de la media query son válidos a partir del valor de píxeles especificado.
Como en el ejemplo siguiente, el tamaño de fuente de la etiqueta <p> se establece en 17 píxeles, hasta un máximo de 751 píxeles.
@media (min-width: 751px) {
p {
font-size: 17px;
}
}Media Query con Max-width
Cuando se utiliza max-width, los códigos CSS escritos dentro de la media query son válidos para valores inferiores al píxel especificado.
Como en el ejemplo siguiente, el tamaño de fuente de la etiqueta <p> se establece en 14 píxeles, hasta un máximo de 750 píxeles.
@media (max-width: 750px) {
p {
font-size: 14px;
}
}Orientación: Horizontal (Landscape)
Cuando se utiliza orientation: landscape, los códigos CSS escritos dentro de la media query son válidos cuando los dispositivos móviles se colocan en posición horizontal.
En el ejemplo siguiente, se especifica el código CSS que cambiará el color del cuadro cuando el dispositivo móvil esté en posición horizontal.
Vertical
Horizontal
div {
height: 100px;
width: 100px;
background-color: bisque;
}
@media (orientation: landscape) {
div {
background-color: brown;
}
}Orientación: Vertical (Portrait)
Cuando se utiliza orientation: portrait, los códigos CSS escritos dentro de la media query son válidos cuando los dispositivos móviles están en posición vertical.
Vertical
Horizontal
h1 {
font-weight: 100;
}
@media (orientation: portrait) {
h1 {
font-weight: bold;
}
}Compatibilidad con Navegadores Antiguos
El único concepto utilizado en la media query evita la ejecución de media queries no válidas en los navegadores más antiguos. No tiene ningún efecto en los navegadores modernos.
@media only screen and (max-width: 750px) {...}Media Query y Viewport
Para que la estructura de media queries funcione, la metaetiqueta viewport debe añadirse dentro de la etiqueta <head></head> en el código fuente de la página.
<meta name="viewport" content="width=device-width, initial-scale=1">Fuente:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries