¿Qué significa @media screen y (max-width: 1024px) en CSS?
Encontré esta pieza de código en un archivo CSS que heredé, pero no puedo darle ningún sentido:
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
Específicamente, ¿qué está sucediendo en la primera línea?
9 answers
Eso es una consulta de medios. Evita que el CSS que contiene se ejecute a menos que el navegador pase las pruebas que contiene.
Las pruebas en esta consulta de medios son:
@media screen- El navegador se identifica como si estuviera en la categoría "pantalla". Esto significa aproximadamente que el navegador se considera a sí mismo de clase de escritorio, a diferencia de, por ejemplo, un anterior navegador de teléfono móvil (tenga en cuenta que el iPhone y otros navegadores de teléfonos inteligentes, hacen se identifican como categoría de pantalla), o un lector de pantalla - y que está mostrando la página en pantalla, en lugar de imprimirla.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 admiten max-width en consultas de medios, y se ejecutan muchos navegadores de escritorio 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 los navegadores que admiten la consulta de medios max-width.
Aquí está la especificación Media Queries, es bastante legible:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-19 16:19:07
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 vistas que tienen 1024px o menos de ancho.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-16 23:51:13
Dice: Cuando la página se renderiza en la pantalla a una resolución máxima de 1024 píxeles de ancho, aplique la regla que sigue.
Como puede que ya sepa, de hecho, puede dirigir algunos CSS a un tipo de medio que puede ser uno de mano, pantalla, impresora, etc.
Echa un vistazo aquí para más detalles..
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-11-15 23:33:37
Eso es Media Queries. Le permite aplicar parte de las reglas CSS solo a los dispositivos específicos en una configuración específica.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-11-15 23:39:26
En mi caso, quería centrar mi logotipo en un sitio web cuando el navegador tiene 800px o menos, entonces lo hice usando la etiqueta @media:
@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 esta solución útil. :) Para más información ver este.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-02 04:45:40
Significa que si el tamaño de la pantalla es 1024, solo se aplican las reglas CSS siguientes.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-08 18:37:14
Si su condición de consulta de medios es verdadera, entonces su css con esa condición funcionará, Eso significa que CSS dentro de la condición tamaño de píxel de su consulta de medios afectará, De lo contrario, si la condición fallará, eso significa que si el ancho del dispositivo es mayor que 1024px, su CSS no funcionará.Porque su condición de consulta de medios es falsa. max-width es tu límite máximo de css hasta ese ancho.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-21 13:15:11
También vale la pena señalar que puede usar 'em', así como 'px': los blogs y los sitios basados en texto lo hacen porque entonces el navegador toma decisiones de diseño más relativas al contenido de texto.
En Wordpress twentysixteen quería que mi eslogan se mostrara en móviles, así como en computadoras de escritorio, así que puse esto en mi estilo de tema hijo.css
@media screen and (max-width:59em){
p.site-description {
display: block;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-09 21:59:09
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 anterior dice que 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 .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-06 08:30:55