CSS Media Queries - Ejemplos

CSS Media Queries - Más ejemplos

Vamos a ver más ejemplos del uso de consultas de medios.

La consulta de medios es una técnica popular para transmitir hojas de estilo personalizadas a diferentes dispositivos.

A continuación, se muestra un ejemplo simple para cambiar el color de fondo de diferentes dispositivos:

Consulta de medios CSS

Ejemplo

/* Establece el color de fondo del body en marrón claro */
body {
  background-color: tan;
}
/* En pantallas de menos de o igual a 992 píxeles, establece el color de fondo en azul */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* En pantallas de 600 píxeles o menos, establece el color de fondo en olivo */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

Pruebe usted mismo

¿Quieres saber por qué usamos 992px y 600px de manera precisa? Son lo que llamamos 'puntos de ruptura típicos' (typical breakpoints) de los dispositivos. Puedes encontrar más información en nuestros Tutoriales de diseño web responsivo Aprende más sobre puntos de ruptura típicos en chino.

Consulta de medios del menú

En este ejemplo, usamos consultas de medios para crear un menú de navegación responsivo que cambia en diferentes tamaños de pantalla.

Pantalla grande:

Pantalla pequeña:

Ejemplo

/* Contenedor del navbar */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Enlaces del navbar */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* En pantallas con un ancho de 600 píxeles o menos, hacer que los enlaces del menú se apilen en lugar de alinearse en paralelo */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

Pruebe usted mismo

Consulta de medios de columnas

Una aplicación común de la consulta de medios es crear un diseño flexible. En este ejemplo, creamos un diseño que cambia entre cuatro columnas, dos columnas y columnas de ancho completo, dependiendo del tamaño de la pantalla diferente:

Pantalla grande:

Pantalla media:

Pantalla pequeña:

Ejemplo

/* Crear cuatro columnas flotantes iguales una al lado de la otra */
.column {
  float: left;
  width: 25%;
}
/* En pantallas de 992px o menos, pasar de cuatro columnas a dos columnas */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* En pantallas con un ancho de 600 píxeles o menos, hacer que las columnas se apilen en lugar de alinearse en paralelo */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Pruebe usted mismo

Consejo:métodos más modernos de creación de diseño de columnas utilizando CSS Flexbox (ver ejemplos a continuación). Sin embargo, Internet Explorer 10 y versiones anteriores no lo admiten. Si necesitas soporte para IE6-10, usa flotación (como se muestra anteriormente).

Para aprender más sobre el módulo de diseño de cajas flexibles, por favor aprende Flexbox CSS este capítulo.

Para aprender más sobre el diseño web responsivo, por favor aprende nuestro Tutoriales de diseño web responsivo.

Ejemplo

/* Contenedor de cajas flexibles */
.row {
  display: flex;
  flex-wrap: wrap;
}
/* Crear cuatro columnas iguales */
.column {
  flex: 25%;
  padding: 20px;
}
/* En pantallas de 992px o menos, pasar de cuatro columnas a dos columnas */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}
/* En pantallas con un ancho de 600 píxeles o menos, hacer que las columnas se apilen en lugar de alinearse en paralelo */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

Pruebe usted mismo

Ocultar elementos con consulta de medios

Otra de las aplicaciones comunes de la consulta de medios es ocultar elementos en diferentes tamaños de pantalla:

Ocultaré este elemento en pantallas pequeñas.

Ejemplo

/* Si el tamaño de la pantalla es de 600 píxeles o menor, oculta el elemento */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Pruebe usted mismo

Cambiar el tamaño de la fuente con consultas de medios

También puedes usar consultas de medios para cambiar el tamaño de la fuente en diferentes tamaños de pantalla:

Tamaño de fuente variable.

Ejemplo

/* Si el tamaño de la pantalla es mayor de 600 píxeles, configura el tamaño de la fuente del <div> en 80 píxeles */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}
/* Si el tamaño de la pantalla es de 600px o menor, configura el tamaño de la fuente del <div> en 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Pruebe usted mismo

Biblioteca de imágenes flexible

En este ejemplo, usamos la consulta de medios junto con flexbox para crear una biblioteca de imágenes adaptable:

Ejemplo

Pruebe usted mismo

Sitio web flexible

En este ejemplo, usamos la consulta de medios junto con flexbox para crear un sitio web adaptable que contenga una barra de navegación flexible y contenido flexible.

Ejemplo

Pruebe usted mismo

Orientación: retrato / paisaje

Las consultas de medios también se pueden usar para cambiar el diseño de la página según la orientación del navegador.

Puedes configurar un conjunto de propiedades CSS que solo se aplican cuando el ancho de la ventana del navegador es mayor que su altura, es decir, en modo horizontal:

Ejemplo

Si la orientación está en modo horizontal, usa un fondo de color azul claro:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Pruebe usted mismo

Desde el ancho mínimo al máximo

También puedes usar las propiedades max-width y min-width para establecer el ancho mínimo y máximo.

Por ejemplo, cuando el ancho del navegador está entre 600 y 900 píxeles, cambia el aspecto del elemento <div>:

Ejemplo

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Pruebe usted mismo

Uso de valores adicionales: En el siguiente ejemplo, usamos la coma (simil a operador OR) para agregar consultas de medios adicionales a consultas de medios existentes:

Ejemplo

/* Cuando el ancho está entre 600 píxeles y 900 píxeles o mayor que 1100 píxeles, cambia el aspecto del <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Pruebe usted mismo

Manual de referencia @media CSS

Una descripción completa de todos los tipos de medios y características / expresiones, consulte Regla @media en la referencia CSS.

Consejo:Para obtener más información sobre el diseño web responsivo (cómo adaptarse a diferentes dispositivos y pantallas) y el uso de puntos de quiebre de consultas de medios, lea nuestro Tutoriales de diseño web responsivo.