2.1 Fundamentos de las consultas de medios
Las consultas de medios (media queries) son una de las herramientas clave para crear sitios web responsivos. Con ellas puedes adaptar los estilos para diferentes dispositivos y tamaños de pantalla, asegurando una visualización óptima y facilidad de uso. A continuación, veremos los fundamentos del uso de consultas de medios, su sintaxis, así como ejemplos de adaptación de estilos para diferentes pantallas.
Las consultas de medios utilizan la regla @media, que permite aplicar ciertos estilos solo cuando se cumplen
condiciones específicas. Las condiciones pueden incluir tamaños de pantalla, resolución, orientación y otros parámetros.
Sintaxis:
@media media-type and (media-feature) {
/* estilos */
}
Dónde:
media-type: tipo de medio para el que se aplicarán los estilos. Más comúnmente se usa screenmedia-feature: características del medio, como ancho, alto, orientación, etc.
Ejemplo:
- En este ejemplo, el fondo de la página se vuelve azul claro si el ancho de la pantalla no supera los 768 píxeles.
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
2.2 Tipos de consultas de medios
1. Consultas por ancho y alto
Estas consultas de medios permiten cambiar los estilos dependiendo del ancho y alto de la ventana de visualización.
Ejemplos:
/* Aplicar estilos si el ancho de la pantalla es menor o igual a 768px */
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
/* Aplicar estilos si el alto de la pantalla es mayor a 800px */
@media (min-height: 800px) {
.header {
height: 150px;
}
}
2. Orientación (orientation)
Las consultas por orientación de pantalla permiten adaptar los estilos dependiendo de si el dispositivo está en modo retrato (portrait) o paisaje (landscape).
Ejemplos:
/* Aplicar estilos para orientación retrato */
@media (orientation: portrait) {
.sidebar {
display: none;
}
}
/* Aplicar estilos para orientación paisaje */
@media (orientation: landscape) {
.sidebar {
display: block;
}
}
3. Densidad de píxeles (resolution)
Las consultas de medios por densidad de píxeles permiten adaptar los estilos para dispositivos con diferentes densidades de píxeles, como pantallas Retina.
Ejemplos:
/* Aplicar estilos para pantallas con densidad de píxeles 2x y superior */
@media (min-resolution: 2dppx) {
.high-res-image {
background-image: url('high-res-image.png');
}
}
/* Aplicar estilos para pantallas con densidad de píxeles menor de 2x */
@media (max-resolution: 1.99dppx) {
.high-res-image {
background-image: url('standard-res-image.png');
}
}
2.3 Combinación de consultas de medios
Las consultas de medios pueden ser combinadas usando operadores lógicos and, not y only.
Ejemplos
Uso del operador and:
/* Aplicar estilos para dispositivos con ancho de pantalla entre 600px y 1200px */
@media (min-width: 600px) and (max-width: 1200px) {
.main-content {
margin: 0 auto;
width: 80%;
}
}
Uso del operador not:
/* Aplicar estilos para todos los dispositivos, excepto aquellos con un ancho de pantalla menor a 600px */
@media not all and (max-width: 600px) {
.footer {
display: block;
}
}
Uso del operador only:
/* Aplicar estilos solo para pantallas */
@media only screen and (max-width: 768px) {
.menu {
display: none;
}
}
GO TO FULL VERSION