El diseño web sensible es un método para crear páginas web en las que esas páginas pueden cambiar dinámicamente su diseño y apariencia según el tamaño de la pantalla del visitante. Las pantallas grandes pueden recibir un diseño adecuado para esas pantallas más grandes, mientras que los dispositivos más pequeños, como los teléfonos móviles, pueden recibir el mismo sitio web con el formato adecuado 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 las clasificaciones de los motores de búsqueda. Una parte importante del diseño web sensible es CSS Media Queries.
Las consultas de medios son como pequeñas declaraciones condicionales dentro del archivo CSS de su sitio web, lo que le permite establecer ciertas reglas CSS que solo tendrán efecto una vez que se cumpla cierta condición, como cuando un tamaño de pantalla está por encima o por debajo de ciertos umbrales.
Consultas de medios en acción
Entonces, ¿cómo se utilizan las consultas de medios en un sitio web? Aquí hay un ejemplo muy simple:
- Comenzarías con un documento HTML bien estructurado y sin estilos visuales (para eso es CSS)
- En su archivo CSS, comenzaría como lo hace normalmente al diseñar la página y establecer una línea de base para el aspecto del sitio web. Digamos que deseaba que el tamaño de fuente de la página fuera de 16 píxeles, podría escribir este CSS:
cuerpo {font-size: 16px; }
- Ahora, es posible que desee aumentar ese tamaño de fuente para pantallas más grandes que tengan suficiente espacio para hacerlo. Aquí es donde se activan las consultas de medios. Debería iniciar una consulta de medios como esta:
Pantalla @media y (ancho mínimo: 1000 px) {}
- Esta es la sintaxis de una consulta de medios. Comienza con @media para establecer la consulta de medios en sí. A continuación, configura el "tipo de medio", que en este caso es "pantalla". Esto se aplica a las pantallas de las computadoras de escritorio, tabletas, teléfonos, etc. Finalmente, finaliza la Consulta de medios con la "función de medios". En nuestro ejemplo anterior, eso es "mid-width: 1000px". Esto significa que la consulta de medios se activará para las pantallas con un ancho mínimo de 1000 píxeles de ancho.
- Después de estos elementos de la consulta de medios, agregue una llave de apertura y cierre similar a lo que haría en cualquier regla de CSS normal.
- El último paso para una consulta de medios es agregar las reglas CSS que desea aplicar una vez que se cumpla esta condición. Agregue estas reglas CSS entre las llaves que forman la consulta de medios, como esto:
Pantalla de @media y (ancho mínimo: 1000 px) {body {font-size: 20px; }
- 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 fuente de nuestro sitio de los 16 píxeles que establecimos originalmente a nuestro nuevo valor de 20 píxeles.
Añadiendo más estilos
Puede colocar tantas reglas de CSS dentro de esta Consulta de medios como sea necesario para ajustar la apariencia visual de su sitio web. Por ejemplo, si deseaba no solo aumentar el tamaño de la fuente a 20 píxeles, sino también cambiar el color de todos los párrafos a negro (# 000000), podría agregar esto:
Pantalla de @media y (ancho mínimo: 1000 px) {body {font-size: 20px; } p {color: # 000000; }}
Agregando más consultas de medios
Además, puede agregar más consultas de medios para todos los tamaños más grandes, agregándolos a su hoja de estilos de esta manera:
Pantalla de @media y (ancho mínimo: 1000 px) {body {font-size: 20px; } p {color: # 000000; {} @media screen y (min-width: 1400px) {body {font-size: 24px; }}
Las primeras consultas de medios se iniciarían a 1000 píxeles de ancho, cambiando el tamaño de la fuente a 20 píxeles. Luego, una vez que el navegador estuviera por encima de los 1400 píxeles, el tamaño de la fuente cambiaría nuevamente a 24 píxeles. Puede agregar tantas consultas de medios como sea necesario para su sitio web en particular.
Ancho mínimo y ancho máximo
En general, hay dos formas de escribir consultas de medios: usando "ancho mínimo" o con "ancho máximo". Hasta ahora, hemos visto "min-width" en acción. Esto hace que las Consultas de medios tengan efecto una vez que el navegador haya alcanzado al menos el ancho mínimo. Por lo tanto, una consulta que use "min-width: 1000px" se aplicará cuando el navegador tenga al menos 1000 píxeles de ancho. Este estilo de Media Query se usa cuando se está construyendo un sitio de manera "móvil para los primeros".
Si usas "ancho máximo", funciona de la manera opuesta. Una consulta de medios de "ancho máximo: 1000 px" 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 desafío con Media Queries es su falta de soporte en versiones anteriores de Internet Explorer. Afortunadamente, hay polyfills disponibles que pueden parchear el soporte para consultas de medios en los navegadores más antiguos, lo que le permite usarlos en los sitios web de hoy mientras se asegura que la visualización de ese sitio no se vea descompuesta en el software de navegador más antiguo.
Editado por Jeremy Girard el 24/01/17
7
