El diseño web con capacidad de respuesta es un enfoque para construir páginas web en las que esas páginas pueden cambiar dinámicamente su diseño y apariencia en función del tamaño de la pantalla del visitante. Las pantallas grandes pueden recibir un diseño adecuado para las pantallas más grandes, mientras que los dispositivos más pequeños, como los teléfonos móviles, pueden recibir el mismo sitio web formateado de una manera que sea adecuada para esa pantalla más pequeña. Este enfoque proporciona una mejor experiencia de usuario para todos los usuarios e incluso puede ayudar a mejorar la clasificación en los motores de búsqueda. Una parte importante del diseño web con capacidad de respuesta es CSS Media Queries.

Las Consultas de Medios son como pequeñas declaraciones condicionales dentro del archivo CSS de su sitio web, permitiéndole establecer ciertas reglas CSS que sólo tendrán efecto una vez que se cumpla una cierta condición – como cuando el tamaño de la pantalla está por encima o por debajo de ciertos umbrales.

Consultas de medios en acción

Entonces, ¿cómo se utilizan las consultas de los medios de comunicación en un sitio web? He aquí un ejemplo muy simple:

1. Comenzaría con un documento HTML bien estructurado libre de estilos visuales (para eso está CSS)
2. En su archivo CSS, usted comenzaría como lo hace normalmente estilizando la página y estableciendo una línea de base de cómo se verá el sitio web. Supongamos que quieres que el tamaño de la fuente de la página sea de 16 píxeles, podrías escribir este CSS: cuerpo { tamaño de fuente: 16px; }
3. Ahora, es posible que desee aumentar el tamaño de la fuente para pantallas más grandes que tengan suficiente espacio para hacerlo. Aquí es donde las Consultas de los Medios de Comunicación intervienen. Usted iniciaría una consulta de medios como ésta:

    @media screen y (min-ancho: 1000px) { }

4. Esta es la sintaxis de una consulta de medios. Comienza con @media para establecer la propia consulta de medios. A continuación, se ajusta el «tipo de medio», que en este caso es «pantalla». Esto se aplica a las pantallas de computadoras de escritorio, tabletas, teléfonos, etc. Por último, finalice la Consulta de medios con la «función de medios». En nuestro ejemplo anterior, esto es «ancho medio: 1000px». Esto significa que la consulta de medios se activará para pantallas con un ancho mínimo de 1000 píxeles.
5. Después de estos elementos de la consulta de medios, se añade una llave de apertura y cierre similar a la que se utilizaría en cualquier regla CSS normal.

1. El paso final para una consulta de medios es añadir las reglas CSS que desea aplicar una vez que se cumpla esta condición. Estas reglas CSS se añaden entre los corchetes que componen la consulta de medios, de la siguiente manera: @media pantalla y (min-ancho: 1000px) { cuerpo { tamaño de fuente: 20px; }
2. Cuando se cumplan las condiciones de la consulta de medios (la ventana del navegador tiene al menos 1000 píxeles de ancho), este estilo CSS tendrá efecto, cambiando el tamaño de la fuente de nuestro sitio de los 16 píxeles que establecimos originalmente a nuestro nuevo valor de 20 píxeles.

Adición de más estilos

Puede colocar tantas reglas CSS en esta consulta multimedia como sea necesario para ajustar la apariencia visual de su sitio web. Por ejemplo, si desea no sólo aumentar el tamaño de la fuente a 20 píxeles, sino también cambiar el color de todos los párrafos a negro (#00000000), puede añadir esto:

@media screen y (min-width: 1000px) {cuerpo {tamaño de fuente: 20px;}p {color: #00000000;}}

Adición de más consultas multimedia

Además, puede añadir más consultas multimedia para todos los tamaños más grandes, añadiéndolas a su hoja de estilos de la siguiente manera:

@media screen y (min-width: 1000px) {cuerpo {tamaño de fuente: 20px;}p {color: #00000000;{}@media screen and (min-width: 1400px) {body {font-size: 24px;}}

Las primeras consultas de medios se inician con un ancho de 1000 píxeles, cambiando el tamaño de la fuente a 20 píxeles. Entonces, una vez que el navegador estaba por encima de los 1400 píxeles, el tamaño de la fuente cambiaría de nuevo a 24 píxeles. Usted puede agregar tantas consultas de medios como sea necesario para su sitio web en particular.

Ancho mín. y ancho máx.

Generalmente hay dos maneras de escribir Consultas de medios – usando «min-width» (ancho mínimo) o «max-width» (ancho máximo). Hasta ahora, hemos visto «min-width» en acción. Esto hace que las consultas multimedia surtan efecto una vez que el navegador haya alcanzado al menos ese ancho mínimo. Por lo tanto, una consulta que utilice «min-width: 1000px» se aplicará cuando el navegador tenga al menos 1000 píxeles de ancho. Este estilo de consulta de medios se utiliza cuando se está construyendo un sitio de una manera «móvil-primero».

Si se utiliza «max-width» (ancho máximo), funciona de la manera opuesta. Una consulta de medios de «max-width: 1000px» se aplicaría una vez que el navegador haya caído por debajo de este tamaño.

Con respecto a los navegadores más antiguos

Un reto con Media Queries es su falta de soporte en versiones anteriores de Internet Explorer. Afortunadamente, hay polyfills disponibles que pueden parchear el soporte para Media Queries en esos navegadores antiguos, permitiéndole usarlos en sitios web hoy en día, mientras se asegura de que la visualización de ese sitio no se vea interrumpida en el software de navegadores antiguos.

Editado por Jeremy Girard el 1/24/17

7