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

245

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á pasando en la primera línea?

css media-queries Yarin
fuente

Respuestas:

306

Esa es una consulta de medios. Impide que se ejecute el CSS dentro de él 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 como perteneciente a la categoría "pantalla". Esto significa más o menos el navegador se considera escritorio de clase - a diferencia de, por ejemplo, una mayor navegador del teléfono móvil (nota que el iPhone, y otros navegadores de teléfonos inteligentes, no se identifican a sí mismos como en la categoría de pantalla), o un lector de pantalla - y que está mostrando la página en pantalla, en lugar de imprimirla.

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

Esa segunda prueba sugiere que esto está destinado a limitar el CSS al iPad, iPhone y dispositivos similares (porque algunos navegadores más antiguos no son compatibles max-widthcon las consultas de medios, y muchos navegadores de escritorio se ejecutan a más de 1024 píxeles).

Sin embargo, también se aplicará a ventanas de navegador de escritorio de menos de 1024 píxeles de ancho, en navegadores que admitan la max-widthconsulta de medios.

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

Paul D. Waite
fuente
si el ancho de mi pantalla es superior a 1200px, cómo especificar en la pantalla @media
sanoj lawrence
2
solo puede usar (min-width: 1200px) en lugar de usar max-width, o simplemente puede tenerlo como CSS normal sin una consulta de medios y usar 'max-width' para sobrescribir esto cuando va a un dispositivo más pequeño
MintWelsh
¿Hay alguna forma de afectar el estilo solo en el escritorio (NO en dispositivos móviles) mientras cambia el tamaño de la ventana gráfica? Entonces, si redimensioné manualmente mi navegador a 'ancho máximo 720px de ancho', usaría una declaración de medios que lo detecte en un escritorio no móvil, y ahora está por debajo de 720px, por ejemplo.
wharfdale
@ JordanC26: parece que estás haciendo una pregunta, y para eso quieres el botón "Hacer pregunta" cerca de la esquina superior derecha de la pantalla. Sin embargo, antes de usar eso, es posible que desee definir qué quiere decir con "escritorio" y "móvil". ¿Es un Microsoft Surface móvil o de escritorio? ¿Por qué? ¿Qué pasa con los dispositivos futuros que aún no se han inventado?
Paul D. Waite
55

Está limitando los estilos definidos allí a la pantalla (por ejemplo, no imprimir u otros medios) y está limitando aún más el alcance a las ventanas gráficas de 1024px o menos de ancho.

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

Chris Bentley
fuente
10

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

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

Echa un vistazo aquí para más detalles.

Lorenzo
fuente
3
No asumiría que él lo sabe.
jcolebrand
6

En mi caso, quería centrar mi logotipo en un sitio web cuando el navegador tiene 800pxo menos, luego lo hice usando la @mediaetiqueta:

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

Funcionó para mí, espero que alguien encuentre útil esta solución. :) Para más información ver esto .

yehanny
fuente
1

Significa que si el tamaño de la pantalla es 1024, solo se aplican las siguientes reglas CSS.

Kumar Nitesh
fuente
1

Si su condición de consulta de medios es verdadera, su CSS con esa condición funcionará. Eso significa que CSS dentro del tamaño de píxel de la condición de la consulta de medios afectará, de lo contrario, si la condición falla, eso significa que si el ancho del dispositivo es mayor a 1024px que su CSS no funcionará, porque la condición de consulta de medios es falsa.

max-width es su límite máximo de CSS hasta ese ancho.

Anup
fuente
0

También vale la pena señalar que puede usar 'em' y 'px': los blogs y los sitios basados ​​en texto lo hacen porque luego el navegador toma decisiones de diseño más relativas al contenido de texto.

En Wordpress Twentysixteen quería que mi lema se mostrara tanto en móviles como en escritorios, así que puse esto en mi tema infantil style.css

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

Apunta a alguna característica especificada para ejecutar 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 anterior dice si el dispositivo que ejecuta este programa tiene una pantalla con 600px o menos de 600px de ancho, en este caso nuestro programa debe ejecutar esta parte.

Shahin Ghasemi
fuente