Cómo agregar consultas de medios CSS para el código de su página web

Cómo agregar consultas de medios CSS para el código de su página web

Cómo agregar consultas de medios CSS para el código de su página web

VALORACIÓN DEL ARTÍCULO:
5/5


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

Deja un comentario

TAMBIÉN TE INTERESA

skyshowtime

Una nueva plataforma de streaming se presenta en Europa: llega SkyShowtime

Llega a Europa SkyShowtime para sumarse a la importante oferta que tienen los consumidores en sus televisiones inteligentes. Netflix, Prime Video, HBO Max, Disney+, Dazon… y ahora este nuevo servicio de streaming que se ha presentado recientemente en Europa.   Por el momento llegará primero a los países nórdicos. SkyShowtime se estrena en Dinamarca, Finlandia,

desaparece-el-notch-del-iphone-14-pro

El precio del iPhone 14, motivo clave en la caída de su demanda

Estamos en un momento de inflación disparada y la situación económica de alza de precios está mermando la capacidad de consumo de las familias. Se nota en todo, en el ocio, la cesta de la compra y también la adquisición de tecnología. Además nos encontramos a escasos meses de picos de consumo como el Black

veentajas-del-marketplace

Ventajas de los marketplaces en plena escalada de precios

Si vendes productos por la web, deberías apostar por los marketplaces, aún en un momento de inflación alta, en plena escalada de precios. La economía se encuentra en un momento difícil: agosto cerró con una tasa de inflación superior a los dos dígitos (10,4%) por tercer mes consecutivo. La incertidumbre ante el invierno impulsa a

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,