Leer Más...

Media query (consultas de medios) limita el alcance de los estilos CSS para que solo se apliquen cuando se cumplen ciertas condiciones de medios.

Piense en las consultas de los medios de comunicación como sentencias if-else para que el navegador las interprete. Las consultas de medios son expresiones lógicas que se evalúan como verdaderas o falsas. 

Una consulta de medios consta de un tipo de medios opcional, cero o más funciones de medios y palabras clave lógicas que permiten la construcción de expresiones más complejas. La sintaxis es la siguiente:

@media [not | only] <media-type> [and] (<media-condition>);

Tipos de medios

Un tipo de medio es una amplia categoría de dispositivos de agente de en los que se puede mostrar un documento. La lista de tipos de medios se ha revisado en la especificación de nivel 4 de Consultas de medios. Como tal, los siguientes tipos de medios están definidos para su uso en media queries (consultas de medios):

• all: Coincide con todos los dispositivos.
• print: Hace coincidir las impresoras y los dispositivos destinados a reproducir una pantalla impresa, como un navegador web que muestra un documento en "Vista preliminar de impresión"
• screen: Coincide con todos los dispositivos que no coinciden con la impresión o el habla.
• speech: Coincide con lectores de pantalla y dispositivos similares que "leen" una página.

Características de los medios

Las características de los medios son una condición más granular que los tipos de medios, ya que se dirigen a una única característica específica del dispositivo en cuestión. La sintaxis de una característica de medios es la misma que una propiedad de CSS, que consiste en un nombre de característica, dos puntos y el valor para probar.

La lista de funciones de medios también ha cambiado del Nivel 3 de consultas de Medios al Nivel 4 de consultas de Medios. Las funciones en desuso se han mantenido en la especificación para compatibilidad con versiones anteriores, pero se ha enfatizado que no deben usarse en nuevas hojas de estilo. Los agentes de seguirán apoyándolos como se especifica.

- Dimensiones de la pantalla del dispositivo: width, height, aspect-ratio, orientation.
- Calidad de la pantalla: resolution, scan, grid, update, overflow-block, overflow-inline.
- Color: color, color-index, monochrome, color-gamut.
- Interacción: pointer, hover, any-pointer y any-hover.
- Scripting: scripting.

Usando consultas de medios para diseño responsivo

La idea detrás del diseño responsive es ofrecer una gran experiencia en una variedad de dispositivos utilizando el mismo código base. Esto significa que el código que escribimos debe ser agnóstico al dispositivo. Ejecutar bien el diseño de respuesta no es una tarea pequeña, y requiere que aceptemos la fluidez de la Web en lugar de luchar para controlarla. Y las consultas de los medios son una parte integral de la implementación de un diseño responsivo.

La naturaleza extensible de las consultas de medios permite todo tipo de expresiones de medios complejas, pero las más utilizadas en el contexto del diseño responsivo son aquellas que se dirigen width y en menor medida a height.

En términos generales, hay dos formas de estructurar estas consultas de medios. Tendemos a referirnos a min-width qué son las consultas de medios basadas en dispositivos móviles primero. Esto significa que los estilos base se dirigen a la ventana gráfica más pequeña y se aplican estilos adicionales a medida que la ventana gráfica se hace más grande. A la inversa, max-width qué son las consultas de medios basadas en el tamaño de la ventana gráfica más grande son las predeterminadas y aplican estilos adicionales para atender tamaños de ventana gráfica más pequeños.

Ejemplo simple de ancho mínimo

Digamos que queremos un diseño de dos columnas con una sección de contenido principal que ocupe 3/4 de la página y una barra lateral a la derecha que ocupe 1/4 de la página. Luego, en un dispositivo con una ventana gráfica estrecha, como un teléfono móvil, queremos que esta misma página web muestre el contenido de la barra lateral debajo del contenido principal.
Ver resultados

En el ejemplo anterior, la consulta utilizada es:

@media (min-width: 35em) {
  /* Algunas propiedades CSS */
}

En un lenguaje sencillo, esto le dice al navegador, cuando la pantalla es mayor o igual a 35em (560px) de ancho, aplique los estilos contenidos dentro de este bloque. Al utilizar consultas de medios de ancho mínimo, nuestros estilos base (es decir, estilos predeterminados cuando la condición de medios no está vigente) se activarán en los tamaños de pantalla estrechos.

Para este escenario en particular, ni siquiera tenemos que escribir ningún estilo base porque el elemento principal y el elemento aparte son elementos de bloque, y los navegadores mostrarán el elemento principal en la parte superior y el elemento aparte debajo de él de manera predeterminada. Esta es una de las razones por las que algunos desarrolladores abogan por el uso de consultas de medios de ancho mínimo para un diseño receptivo. Muchas veces, estarás escribiendo menos código.

Ejemplo simple de ancho máximo

Vamos a codificar el mismo escenario utilizando consultas de ancho máximo en su lugar. La consulta de medios utilizada en este caso será:

@media (max-width: 35em) {
  /* Algunas propiedades CSS  */
}

Por el contrario, la traducción al inglés simple de esta regla se convierte, cuando la pantalla es menor o igual a 35em (560px) de ancho, aplique los estilos contenidos dentro de este bloque. Esto implica que sus estilos de base tendrán efecto en tamaños de pantalla más amplios.

Como tal, deberá escribir los estilos base que representan el elemento main a la izquierda y el elemento aside a la derecha. Luego, deshaga esos estilos en la consulta de medios para atender los tamaños de pantalla estrechos. Por lo tanto, para este escenario en particular, tendría más sentido utilizar la consulta de medios de 'ancho mínimo'. 
Ver resultados
Habrá otros escenarios donde una consulta de medios de 'ancho máximo' tendría sentido, como en las tablas. La visualización predeterminada para una tabla funciona bien en pantallas anchas, pero en pantallas más pequeñas, es posible que desee aplicar un 'display: bloque'; a las filas de la tabla y las celdas de la tabla para que el contenido se lea mejor en una pantalla estrecha.

<style>
html {
 box-sizing: border-box;
}

*,
*::before,
*::after {
 box-sizing: inherit;
}

body {
 background: #f0f0f0;
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
 margin: 2em auto;
 max-width: 45em;
 border: 1px solid #aaa;
 padding: 1em;
}

.viewport {
 position: absolute;
 font-size: 75%;
 padding: 5px;
 color: grey;
 background: white;
 top: 0;
 left: calc(50% - 70px);
 border-radius: 11px;
 box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.25);
}

table {
 border-collapse: collapse;
 width: 100%;
}
td {
 border: 1px solid grey;
 padding: 0.5em;
}

@media screen and (max-width: 35em) {
 tr,
 td {
 display: block;
 width: 100%;
 }
}
</style>
<body>

<div class="container">
 <p class="viewport">Ancho de la ventana (Viewport width): <span class="c-viewport__width" id="vpWidth"></span>px
 </p>
 <table>
 <tr>
 <td>Tutoriales En Linea</td>
 <td>Tutoriales En Linea</td>
 <td>Tutoriales En Linea</td>
 <td>Tutoriales En Linea</td>
 </tr>
 <tr>
 <td>Tutoriales En Linea</td>
 <td>Tutoriales En Linea</td>
 <td>Tutoriales En Linea</td>
 <td>Tutoriales En Linea</td>
 </tr>
 <tr>
 <td>Tutoriales En Linea</td>
 <td>Tutoriales En Linea</td>
 <td>Tutoriales En Linea</td>
 <td>Tutoriales En Linea</td>
 </tr>
 </table>
</div>

Ver resultados No hay una regla dura y rápida, pero el principio rector sería hacer su elección basándose en los valores predeterminados del elemento. Si el valor predeterminado funciona bien en una pantalla angosta, use las consultas de medios de 'ancho mínimo' para agregar estilos en pantallas más anchas. Si el valor predeterminado funciona bien en una pantalla ancha, use las consultas de medios de 'ancho máximo' para agregar estilos en pantallas más estrechas.

Utilizar unidades relativas para consultas de medios.

El ancho definido en sus consultas de medios se conoce como puntos de interrupción. Estos son los puntos donde usted elige que su contenido se ajuste de la manera que mejor se adapte a la cantidad de espacio disponible. Aunque era un enfoque común para los anchos de destino basados en dispositivos populares, hoy en día, con el gran volumen de tamaños de pantalla en su hábitat natural, esto ya no es una solución viable.

Idealmente, deberíamos dejar que el contenido determine cuáles serán los puntos de ruptura. Una ventaja de diseñar para el tamaño de pantalla más pequeño nos obliga a identificar conscientemente cuál es la información más importante y cómo puede presentarse a sus s de la manera más clara y accesible.

En circunstancias normales, su elección de unidad de CSS para las consultas de medios de alto o ancho no hace mucha diferencia. Sin embargo, no podemos controlar cuándo nuestros s modifican el entorno de navegación haciendo zoom o cambiando la configuración de la fuente. Si lo hacen, entonces empezamos a encontrar algunos comportamientos inesperados.

Dado que dejamos que el contenido dicte nuestros valores de punto de interrupción, si los s cambiaran la configuración de 'tamaño de fuente' de su navegador, nos gustaría que la consulta de medios se adapte a ese cambio en consecuencia. Sin embargo, si utilizáramos unidades absolutas como píxeles, la consulta de medios se mantendría fija en un valor que quizás ya no sea adecuado para el contenido.

Evitando el doble punto de quiebre.

Surge un problema cuando usamos consultas de ancho mínimo y ancho máximo debido a la lógica de cómo se evalúan estas consultas. Los operadores de comparación son inclusivos, esto significa que la condición se cumple una vez que el ancho de la ventana gráfica coincide con el valor del punto de corte declarado. Digamos que tenemos una consulta de ancho mínimo y una consulta de ancho máximo que utiliza 35em como punto de interrupción. Cada uno de los principales navegadores utiliza un motor de renderización diferente, por lo tanto, en 35em, su sitio puede no comportarse como se esperaba y la gravedad del impacto dependerá del tipo de estilos dentro de cada consulta de medios.

Para esta demostración, el comportamiento esperado es que la sección principal tenga un fondo verde en la configuración de 2 columnas y un fondo rojo en la configuración de 1 columna. En '35em', la consulta 'min-width' que establece flex-wrap en nowrap y la consulta 'max-width' que establece 'color de fondo' en 'rojo' y la 'Ver resultados
La clave para sacar de esta demostración es garantizar que al usar consultas adyacentes de 'ancho mínimo' y 'ancho máximo', no use el mismo ancho para ambos. Un enfoque común es tener una separación de 0.01em para evitar esta superposición.

Ejemplos de casos de uso para consultas de medios

Las consultas de medios más prácticas son aquellas que apuntan al ancho y en menor medida a la altura. Las funciones de medios restantes descritas anteriormente generalmente no están bien soportadas en el momento de la escritura.

Paso a paso numérico

Las consultas de medios nos permiten utilizar el mismo conjunto de elementos HTML incluso si el diseño para dispositivos móviles y de escritorio son muy diferentes, aunque hay un límite en cuanto a qué tan diferentes pueden ser ambos diseños.

<style>
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: #f0f0f0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.5;
  min-width: 21.25em;
  margin: 0;
}

.engers {
  padding: 1em;
  margin-left: auto;
  margin-right: auto;
  max-width: 60em;
}

h1 {
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 1em;
}

.enger {
  margin-bottom: 1em;
  padding-right: 1.69492%;
}

@media screen and (min-width: 31em) {
  .enger {
    width: 32.20339%;
    float: left;
    margin-right: 1.69492%;
    border-right: 1px solid black;
  }
  .enger:nth-child(3n) {
    float: right;
    margin-right: 0;
    border-right: 0;
  }
}
@media screen and (min-width: 31em) {
  .enger__label {
    text-align: center;
    margin-bottom: 1em;
  }
}
@media screen and (max-width: 30.99em) {
  .enger__label {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 10.25em);
  }
}
@media screen and (max-width: 24.5em) {
  .enger__label span {
    display: block;
  }
}
@media screen and (min-width: 31em) and (max-width: 39.99em) {
  .enger__label span {
    display: block;
  }
}
.enger__stepper {
  position: relative;
  display: inline-block;
}
.enger__stepper > * {
  display: inline-block;
  vertical-align: middle;
}

@media screen and (min-width: 31em) {
  .enger__stepper {
    display: block;
    max-width: 14em;
    margin: 0 auto;
    width: 100%;
  }
  .enger__stepper::after {
    content: '';
    display: block;
    clear: both;
  }
}
.stepper {
  border: 0;
  outline: 0;
  cursor: pointer;
  font-size: 1.25em;
  background: black;
  color: white;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  box-shadow: 0.125em 0.125em 0 0 white, 0.125em 0.125em 0 1px black;
}
.stepper:active {
  box-shadow: 0 0 0 1px white, 0 0 0 1px black;
  -webkit-transform: translate(0.125rem, 0.125rem);
  transform: translate(0.125rem, 0.125rem);
}

.stepper__display {
  font-size: 2em;
  margin: 0 0.5em;
}

@media screen and (min-width: 31em) {
  .stepper__display {
    font-size: 5em;
    float: left;
    line-height: 1.2;
    margin: 0;
    padding-left: 1rem;
  }

  .stepper {
    position: absolute;
    right: 1rem;
  }

  .stepper__more {
    top: 0;
  }

  .stepper__less {
    bottom: 0;
  }
}
</style>
<body>

<div class="engers">
  <h1>Seleccione numero de pasajeross</h1>
  <div class="enger">
    <p class="enger__label">Adulto <span>(años 12 & up)</span></p>
    <div class="enger__stepper">
      <button type="button" class="stepper stepper__less">-</button>
      <p class="stepper__display">1</p>
      <button type="button" class="stepper stepper__more">+</button>
    </div>
  </div>
  <div class="enger">
    <p class="enger__label">Niños <span>(años 2-11yrs)</span></p>
    <div class="enger__stepper">
      <button type="button" class="stepper stepper__less">-</button>
      <p class="stepper__display">1</p>
      <button type="button" class="stepper stepper__more">+</button>
    </div>
  </div>
  <div class="enger">
    <p class="enger__label">Infantil <span>(años 1-23mths)</span></p>
    <div class="enger__stepper">
      <button type="button" class="stepper stepper__less">-</button>
      <p class="stepper__display">1</p>
      <button type="button" class="stepper stepper__more">+</button>
    </div>
  </div>
</div>

Ver resultados
La demostración anterior requiere el uso de consultas de medios de 'ancho mínimo' y 'ancho máximo' para garantizar que esas propiedades sean las que se usan en cada uno de los bloques de consulta de medios que no caen en cascada entre sí.

Diálogos modales

Los diálogos modales están destinados a centrar la atención del en el contenido del modal y por lo general, se muestran centrados verticalmente en el centro de la página. Esto funciona bien si hay suficiente espacio alrededor del modal, pero en una pantalla más pequeña, no hay mucho espacio para empezar. Sería mejor simplemente mostrar el modal en la parte superior de la pantalla y utilizar el espacio limitado de la pantalla lo mejor que pueda.

<style>
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.viewport {
  position: absolute;
  z-index: 10;
  font-size: 75%;
  padding: 5px;
  color: grey;
  background: white;
  top: 0;
  left: calc(50% - 70px);
  border-radius: 11px;
  box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.25);
}

.overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
}

.modal {
  max-width: 30em;
  width: 100%;
  margin: 1em auto;
  background: #fff;
  text-align: center;
  padding: 1em;
}

@media (min-height: 400px) and (min-width: 500px) {
  .modal {
    position: absolute;
    left: 50%;
    top: 2em;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
<body>

<p class="viewport">Viewport height: <span class="c-viewport__height" id="vpHeight"></span>px
</p>
<div class="overlay">
  <div class="modal">
    <h2>Modal Title</h2>
    <p>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al  el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...</p>
    <button>Okay</button>
  </div>
</div>

Ver resultados

Ver resultados