Respuestas:
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:
@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.
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:
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.
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.
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 .
Eso es consultas de medios . Le permite aplicar parte de las reglas CSS solo a los dispositivos específicos en una configuración específica.
Significa que si el tamaño de la pantalla es 1024, solo se aplican las siguientes reglas CSS.
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.
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;
}
}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.