¿Cómo se escribe una consulta de medios CSS?

Conozca la sintaxis para las consultas de medios de ancho mínimo y ancho máximo

Diseño web adaptable es un enfoque para crear páginas web donde esas páginas pueden cambiar dinámicamente su diseño y apariencia basado en el tamaño de la pantalla de un visitante . Las pantallas grandes reciben un diseño adecuado para esas pantallas más grandes, mientras que los dispositivos más pequeños, como los teléfonos móviles, reciben el mismo sitio web formateado de una manera adecuada para esa pantalla más pequeña. Este enfoque proporciona una mejor experiencia de usuario para todos los usuarios e incluso puede ayudar mejorar la clasificación de los motores de búsqueda . Consultas de medios CSS constituyen una parte importante del diseño web receptivo.

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 de CSS que solo entrarán en vigencia una vez que se cumpla una determinada condición, como cuando el tamaño de una pantalla está por encima o por debajo de ciertos umbrales.

Las consultas de medios ahora son estándar, pero las versiones muy antiguas de Internet Explorer no las admiten.

Consultas de medios en acción

Comience con una bien estructuradadocumento HTMLlibre de cualquier estilo visual.

En su archivo CSS, diseñe la página y establezca una línea de base sobre cómo se verá el sitio web. Para hacer que el tamaño de fuente de la página sea de 16 píxeles, escriba esto CSS :

|_+_|

Agregar más consultas de medios

Además, puede agregar más consultas de medios para cada tamaño más grande, insertándolas en su hoja de estilos de esta manera:

|_+_|

Las primeras Media Queries se activan con 1000 píxeles de ancho, cambiando el tamaño de fuente a 20 píxeles. Luego, una vez que el navegador estaba por encima de los 1400 píxeles, el tamaño de la fuente cambiaría nuevamente a 24 píxeles. Agregue 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 Media Queries: usando ancho mínimo o con anchura máxima . Hasta ahora, hemos visto min-width en acción. Este enfoque activa Media Queries después de que un navegador alcanza al menos ese ancho mínimo. Así que una consulta que utiliza ancho mínimo: 1000px se aplica cuando el navegador tiene al menos 1000 píxeles de ancho. Este estilo de Media Query se utiliza cuando se crea un sitio pensando primero en los dispositivos móviles.

Si utiliza anchura máxima , funciona de manera opuesta. Se aplica una Media Query de 'max-width: 1000px' después de que el navegador haya caído por debajo de este tamaño.