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

@media pantalla y (ancho mínimo: 1000 px) {}

Esta es la sintaxis de Media Query. Empieza con @medios de comunicación para establecer la propia consulta de medios. 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. Finalice la consulta de medios con el característica multimedia. En nuestro ejemplo anterior, eso es ancho medio: 1000px. Esto significa que Media Query se activa para pantallas con un ancho mínimo de 1000 píxeles de ancho.

Después de estos elementos de Media Query, agregue una llave de apertura y cierre similar a lo que haría en cualquier regla CSS normal.

El paso final de una consulta de medios es agregar las reglas CSS que se aplicarán después de que se cumpla esta condición. Inserte estas reglas CSS entre las llaves que componen la Media Query, así:

 @media pantalla y (min-width: 1000px) {body {font-size: 20px; }

Cuando se cumplen las condiciones de Media Query (la ventana del navegador tiene al menos 1000 píxeles de ancho), este estilo CSS entra en vigencia, 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. 
 Agregar más estilos 

Coloque tantos Reglas CSS dentro de esta Consulta de medios según sea necesario para ajustar la apariencia visual de su sitio web. 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: 
@media pantalla y (ancho mínimo: 1000px) {
cuerpo {
tamaño de fuente: 20px;
}
pag {
color: # 000000;
}
}
 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: 
@media pantalla y (ancho mínimo: 1000px) {
cuerpo {
tamaño de fuente: 20px;
}
pag {
color: # 000000;
{
}
@media pantalla y (ancho mínimo: 1400px) {
cuerpo {
tamaño de fuente: 24px;
}
}

Las primeras consultas de medios se activan con 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 los 1400 píxeles, el tamaño de fuente volvería a cambiar a 24 píxeles. Agregue tantas consultas de medios como necesite para su sitio web en particular. 
 Ancho mínimo y ancho máximo 

Por lo general, hay dos formas de escribir consultas de medios: mediante ancho mínimo o con anchura máxima. Hasta ahora, hemos visto min-width 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 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 de una manera móvil primero. 

Si utiliza anchura máxima, funciona de manera opuesta. Una consulta de medios de "max-width: 1000px" se aplica después de que el navegador ha caído por debajo de este tamaño. 

Cite este artículo.