todos - media query css ejemplos
¿Qué significa @media screen y(max-width: 1024px) en CSS? (9)
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?
Dice: Cuando la página se muestre en la pantalla con una resolución de un máximo de 1024 píxeles de ancho, aplique la siguiente regla.
Como es posible que ya sepa, puede orientar algunos CSS a un tipo de medio que puede ser uno de mano, pantalla, impresora, etc.
Echa un vistazo here para más detalles ..
En mi caso, quería centrar mi logotipo en un sitio web cuando el navegador tiene 800px o menos, luego lo hice utilizando 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 útil esta solución. :) Para más información ver this .
Esa es una consulta de medios. Evita que el CSS que se encuentra dentro 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 a sí mismo como parte de la categoría "pantalla". Esto significa que el navegador se considera a sí mismo como una clase de escritorio, a diferencia de, por ejemplo, un navegador de 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 que están en la categoría de pantalla), o un lector de pantalla, y que se muestra 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 de CSS, no píxeles de dispositivo ).
La segunda prueba sugiere que se pretende limitar el CSS al iPad, iPhone y dispositivos similares (debido a que algunos navegadores más antiguos no admiten max-width en 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 las ventanas del navegador de escritorio con menos de 1024 píxeles de ancho, en los navegadores que admiten la consulta de medios de max-width .
Aquí está la especificación de Media Queries, es bastante legible:
Eso es Media Consultas . Le permite aplicar parte de las reglas CSS solo a los dispositivos específicos en una configuración específica.
Esto significa que si el tamaño de la pantalla es 1024, solo se aplican debajo de las reglas de CSS.
Limita los estilos definidos allí a la pantalla (por ejemplo, no imprime o algún otro medio) y limita aún más el alcance a las vistas que tienen 1024 píxeles o menos de ancho.
Se dirige a alguna característica específica 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 código anterior indica 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.
Si su condición de consulta de medios es verdadera, entonces su CSS con esa condición funcionará. Eso significa que CSS dentro del tamaño en píxeles de la condición de su consulta de medios tendrá efecto, o de lo contrario, si la condición fallará, significa que si el ancho del dispositivo es mayor que 1024 px que su CSS no funcionará. Debido a que su 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'' así como ''px'': los blogs y los sitios basados en texto lo hacen porque el navegador toma decisiones de diseño más relacionadas con el contenido del texto.
En Wordpress Twentysixteen quería que mi lema se mostrara en los teléfonos móviles y en los escritorios, así que puse esto en el estilo de mi hijo estilo.css
@media screen and (max-width:59em){
p.site-description {
display: block;
}
}