Está en la página 1de 2

30/11/2019 Aprenda los principios de diseño web receptivo: cree una consulta de medios | freeCodeCamp.

org

Principios de diseño web receptivo: crear una consulta de medios

Las consultas de medios son una nueva técnica introducida en CSS3 que cambia la presentación del
contenido en función de diferentes tamaños de ventana gráfica. La ventana gráfica es el área visible
del usuario de una página web, y es diferente según el dispositivo utilizado para acceder al sitio.

Las consultas de medios consisten en un tipo de medio, y si ese tipo de medio coincide con el tipo de
dispositivo en el que se muestra el documento, se aplican los estilos. Puede tener tantos selectores y
estilos dentro de su consulta de medios como desee.

Aquí hay un ejemplo de una consulta de medios que devuelve el contenido cuando el ancho del
dispositivo es menor o igual a 100 px:

@media (max-width: 100px) { /* CSS Rules */ }

y la siguiente consulta de medios devuelve el contenido cuando la altura del dispositivo es mayor o
igual a 350 px:

@media (min-height: 350px) { /* CSS Rules */ }

Recuerde, el CSS dentro de la consulta de medios se aplica solo si el tipo de medio coincide con el
del dispositivo que se está utilizando.

Agregue una consulta de medios, de modo que la p etiqueta tenga un font-size tamaño de 10
píxeles cuando la altura del dispositivo sea menor o igual a 800 píxeles.

Ejecute las pruebas

Restablecer todo el
código

Obtén un consejo

Ver un video

Pedir ayuda

Debe declarar
una @media consulta
para dispositivos
con
un height tamaño
inferior o igual a
800 px.
Su p elemento debe
tener un font-
size tamaño de 10px
cuando el
dispositivo height es
menor o igual a
800px.
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-principles/create-a-media-query 1/2
30/11/2019 Aprenda los principios de diseño web receptivo: cree una consulta de medios | freeCodeCamp.org

Su p elemento debe
tener una inicial font-
size de 20px cuando el
dispositivo height tiene
más de 800px.

https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-principles/create-a-media-query 2/2

También podría gustarte