¿Qué significa @media screen y (max-width: 1024px) en CSS?

Encontré este fragmento de código en un archivo CSS que heredé, pero no puedo entenderlo:

@media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } 

Específicamente, ¿qué está sucediendo en la primera línea?

Esa es una consulta de medios. Impide que el CSS dentro de él se ejecute a menos que el navegador pase las pruebas que contiene.

Las pruebas en esta consulta de medios son:

  1. @media screen : el navegador se identifica a sí mismo como perteneciente a la categoría “pantalla”. Esto significa que el navegador se considera de escritorio, en lugar de, por ejemplo, un navegador de un teléfono móvil más antiguo (tenga en cuenta que el iPhone y otros navegadores de teléfonos inteligentes se identifican a sí mismos como de la categoría de pantalla) o un lector de pantalla, y que muestra la página en la pantalla, en lugar de imprimirla.

  2. max-width: 1024px : el ancho de la ventana del navegador (incluida la barra de desplazamiento) es 1024 píxeles o menos. ( Píxeles CSS, no píxeles del dispositivo ).

Esa segunda prueba sugiere que esto tiene como objective limitar el CSS al iPad, iPhone y dispositivos similares (porque algunos navegadores antiguos no admiten max-width en consultas de medios, y muchos navegadores de escritorio se ejecutan más de 1024 píxeles).

Sin embargo, también se aplicará a las ventanas del navegador de escritorio de menos de 1024 píxeles de ancho, en navegadores compatibles con la consulta de medios de max-width .

Aquí está la especificación de Media Queries, es bastante legible:

Está limitando los estilos definidos allí a la pantalla (por ejemplo, no imprimir u otro medio) y limita aún más el scope a los viewports que tienen un ancho de 1024 px o menos.

http://www.css3.info/preview/media-queries/

Dice: Cuando la página se renderiza en la pantalla con una resolución de 1024 píxeles de ancho máximo, aplique la regla que sigue.

Como ya sabrá, puede orientar algunos CSS a un tipo de medio que puede ser uno de mano, pantalla, impresora, etc.

Eche un vistazo aquí para más detalles ..

Eso es Media Queries . Le permite aplicar parte de las reglas de CSS solo a los dispositivos específicos en configuraciones específicas.

En mi caso, quería centrar mi logotipo en un sitio web cuando el navegador tiene 800px o menos, y luego lo hice usando la etiqueta @media :

 @media screen and (max-width: 800px) { #logo { float: none; margin: 0; text-align: center; display: block; width: auto; } } 

Me funcionó, espero que alguien encuentre útil esta solución. 🙂 Para obtener más información, vea esto .

Significa que si el tamaño de la pantalla es 1024, entonces solo se aplica debajo de las reglas de CSS.

Si su condición de consulta de medios es verdadera, su CSS con esa condición funcionará, Esto significa CSS en su condición de consulta de medios tamaño de píxel tendrá efecto, Else si la condición fallará significa que si el ancho del dispositivo es mayor a 1024px que su CSS no lo hará trabajo. Porque su condición de consulta de medios es falsa. max-width es tu límite máximo de css hasta ese ancho.

También vale la pena señalar que puede usar ’em’ y ‘px’ – los blogs y sitios basados ​​en texto lo hacen porque el navegador toma decisiones de diseño más en relación con el contenido de texto.

En WordPress veintiséis años, quería que mi lema se mostrara tanto en teléfonos móviles como en computadoras de escritorio, así que puse esto en el estilo de tema de mi hijo.css

 @media screen and (max-width:59em){ p.site-description { display: block; } } 

se dirige a alguna característica especificada para ejecutar algunos otros códigos …

por ejemplo:

 @media all and (max-width: 600px) { .navigation { -webkit-flex-flow: column wrap; flex-flow: column wrap; padding: 0; } 

el fragmento de arriba dice si el dispositivo que ejecuta este progtwig tiene una pantalla con 600px o menos de 600px de ancho, en este caso nuestro progtwig debe ejecutar esta parte.