Array

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

-

CSS logo

El diseño web receptivo es un enfoque para construir páginas web donde esas páginas pueden cambiar dinámicamente su diseño y apariencia en función del tamaño de pantalla de un visitante & amp; # x2019; s. 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 a mejorar la clasificación de los motores de búsqueda. Las consultas de medios CSS constituyen una parte importante del diseño web receptivo.

Las consultas de medios son como pequeñas declaraciones condicionales dentro de su sitio web y el archivo CSS # x2019; s, lo que le permite establecer ciertas reglas CSS que solo tendrán efecto una vez que se cumpla una determinada condición & amp; # x2014; como cuando un tamaño de pantalla está por encima o por debajo de ciertos umbrales.

Video destacado

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 un documento HTML bien estructurado libre de estilos visuales.

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 representar el tamaño de fuente de la página en 16 píxeles, escriba este CSS:

& lt; pre & gt; body {sont-size: 16px; }
& lt; p / & gt ;

Para aumentar ese tamaño de fuente para pantallas más grandes que tienen un amplio patrimonio para hacerlo, inicie una consulta de medios como esta:

& lt; pre & gt; @media screen y (min-width: 1000px) {}
& lt; p / & gt ;

Esta es la sintaxis de una consulta de medios. Comienza con @media para establecer la consulta de medios en sí. A continuación, configure el tipo de medio, que en este caso es pantalla . Este tipo se aplica a pantallas de computadoras de escritorio, tabletas, teléfonos, etc. Termine la consulta de medios con la función de medios . En nuestro ejemplo anterior, es decir ancho medio: 1000px . Esto significa que la consulta de medios se activa para pantallas con un ancho mínimo de 1000 píxeles de ancho.

Después de estos elementos de la Consulta de medios, agregue un aparato ortopédico de apertura y cierre similar a lo que haría en cualquier regla CSS normal.

El paso final para una consulta de medios es agregar las reglas de CSS para aplicar después de cumplir con esta condición. Inserte estas reglas CSS entre los tirantes rizados que componen la consulta de medios, como esta:

& lt; pre & gt; @media screen y (min-width: 1000px) {body {font-size: 20px; }
& lt; p / & gt ;

Cuando se cumplen las condiciones de la Consulta de medios (la ventana del navegador tiene al menos 1000 píxeles de ancho), este estilo CSS entra en vigencia, cambiando nuestro tamaño de fuente del sitio & amp; # x2019; s de los 16 píxeles que establecimos originalmente a nuestro nuevo valor de 20 píxeles.

Agregar más estilos

Coloque tantas reglas de CSS dentro de esta consulta de medios como sea necesario para ajustar su sitio web y su apariencia visual. Por ejemplo, para no solo aumentar el tamaño de fuente a 20 píxeles, sino también cambiar el color de todos los párrafos a negro (# 000000), agregue esto:

& lt; pre & gt; @ pantalla multimedia y (ancho mínimo: 1000px) {& lt; br & gt ;
cuerpo {& lt; br & gt ;
tamaño de fuente: 20px; & lt; br & gt ;
} & lt; br & gt ;
& lt; br & gt ;
p {& lt; br & gt ;
color: # 000000; & lt; br & gt ;
} & lt; br & gt ;
} & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; & lt; / pre & gt;

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 como esta:

& lt; pre & gt; @ pantalla multimedia y (ancho mínimo: 1000px) {& lt; br & gt ;
cuerpo {& lt; br & gt ;
tamaño de fuente: 20px; & lt; br & gt ;
} & lt; br & gt ;
& lt; br & gt ;
p {& lt; br & gt ;
color: # 000000; & lt; br & gt ;
{& lt; br & gt ;
} & lt; br & gt ;
& lt; br & gt ;
@media screen y (min-width: 1400px) {& lt; br & gt ;
cuerpo {& lt; br & gt ;
tamaño de fuente: 24px; & lt; br & gt ;
} & lt; br & gt ;
} & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; & lt; / br & gt; & lt; / br & gt; / br & gt; & lt; / br & gt; & lt; / br & gt; & gt; & gt; & gt; & gt; & gt;

Las primeras consultas de medios se activan a 1000 píxeles de ancho, cambiando el tamaño de fuente a 20 píxeles. Luego, una vez que el navegador estuviera por encima de 1400 píxeles, el tamaño de 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

Generalmente hay dos formas de escribir Medies Queries & amp; # x2014; usando min-width o con max-width . Hasta ahora, hemos visto un ancho mínimo en acción. Este enfoque activa las consultas de medios después de que un navegador alcanza al menos ese ancho mínimo. Entonces, una consulta que usa min-width: 1000px se aplica cuando el navegador tiene al menos 1000 píxeles de ancho. Este estilo de consulta de medios se usa cuando está construyendo un sitio de una manera móvil de primera manera.

Si usa max-width , funciona de la manera opuesta. Una consulta de medios de & amp; quot; max-width: 1000px & amp; quot; se aplica después de que el navegador haya caído por debajo de este tamaño.

& lt; / pre & gt ;
& lt; / pre & gt ;
& lt; / pre & gt ;
& amp; # x203A; Informática}}}

Dejar respuesta

Please enter your comment!
Please enter your name here

FOLLOW US

spot_img

Related Stories