Media Queries CSS3: mejora la visualización de tus proyectos web
Las Media Queries son una de las grandes ventajas de CSS3, ya que permiten saber qué sistema se está visualizando mientras al crear una página web y, en función de ello, aplicar unas reglas de estilo u otras. Así, podemos servir un CSS personalizado, acorde las condiciones del navegador o dispositivo que nos visita. Como veremos a continuación, se han convertido en uno de los mejores recursos con los que cuentan los diseñadores para hacer sitios responsive.
Utilizar las Media Queries de CSS3 es muy sencillo, como todo el lenguaje CSS en general. De una manera descriptiva podemos indicar una condición y a continuación los estilos que deben aplicarse cuando ésta se cumpla. Para aclarar su sintaxis veremos una serie de ejemplos útiles e ilustrativos. [banneroferta product=0] Podemos usarlas con tranquilidad, puesto que todos las soportan. Solo versiones muy antiguas de Internet Explorer tendrán problemas con ellas, de IE8 para abajo.
Medios
Con Media Queries podemos detectar el medio donde se está consumiendo un sitio web.
@media screen {
h1 {
color: red;
}
}
@media print {
h1 {
color: black;
}
}
En estos ejemplos tenemos media queries sencillas, en las que se distingue el modo en el que se está consumiendo la página, en una pantalla o en la impresora.
Tamaños de pantalla
Lo más común es que usemos las Media Queries para detectar las dimensiones de la pantalla.
@media (min-width: 1000px) {
body {
align: 20px;
}
div {
text-align: center;
}
}
Con este ejemplo, estamos aplicando una serie de estilos, que se tendrán en cuenta solamente cuando la anchura de la pantalla sea de 1000px en adelante.
@media (max-width: 320px) {
body {
font-size: .6em;
}
}
En este caso, indicamos que la anchura de la pantalla debe de ser 320 píxeles de máximo para que se apliquen los estilos.
Orientación
También es útil para definir estilos en función de la orientación, lo que resulta especialmente adecuado para el diseño para móviles.
@media (orientation:landscape){
body{
background-image:url(archivo.jpg);
}
}
@media (orientation:portrait){
body{
background-image:url(archivo-pantalla-en-vertical.jpg);
}
}
Landscape es el valor de la orientación cuando la pantalla está en horizontal y portrait para la pantalla en vertical.
Combinar condiciones
En las especificaciones de Media Queries de CSS3 se definen muchas otras condiciones que se puede analizar para distinguir el cliente que nos está visitando, como la profundidad del color, densidad de píxeles, resolución, etc. No todas estarán disponibles en todos los navegadores y, generalmente, las más utilizadas son las que hemos nombrado ya en este artículo.
Para acabar, sólo nos queda ver algún ejemplo sobre cómo se pueden combinar estas condiciones. Por ejemplo, que se apliquen estilos únicamente para pantallas con ciertas dimensiones, o para ciertas dimensiones cuando el dispositivo está en vertical, o impresoras de determinada resolución…
Esta regla aplicaría en dispositivos que se usan en la mano y con dimensiones mínimas de 30em.
@media handheld and (min-width: 30em) {
body {
color: #666;
}
}
Esta regla aplicaría en cualquier medio con dimensiones entre 800 y 1200 píxeles.
@media (min-width: 800px) and (max-width: 1200px) {
.item {
display: none;
}
}
Si diferentes Media Queries son válidas para un entorno y surgen conflictos, éstos se resolverían por la norma de la cascada, de modo que las últimas reglas de estilo definidas serían las que se tendrían en cuenta.
Consulta este post si quieres más información acerca de cómo usar las Media Queries en diseño web responsive.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.