consultas de medios CSS y! Importante

Tengo un sitio web que utiliza consultas de @media pero parece que no los establece. Siempre mantienen el estilo predeterminado.consultas de medios CSS y! Importante

Por ejemplo:

#div1 { background:red} 

@media screen and (max-height:912px) { 
#div1{background:blue} 
}

siempre se quede con fondo: rojo a menos que utilice !important pero dentro de mis preguntas de los medios de que el estilo Estoy tantos selectores. ¿Debo configurar cada estilo de selector !important?

Fuente

2012-04-21 jQuerybeast

Tu código funciona bien en mi sistema. He probado en Firefox, Chrome y Safari en Mac. ¿Cuál es tu entorno de prueba? – Anji

Perdón por la respuesta tardía. Estaba tratando de entender por qué no está funcionando. Aquí está: http://jsfiddle.net/TUL6h/3/ Intenta hacer el color azul cambiando el tamaño. Nunca sucede – jQuerybeast

Escogerá solo el color de cuál es el último en la sección de css. – jQuerybeast

Cambio max-height a min-height: http://jsfiddle.net/jnQYb/

Fuente

2012-04-21 21:52:38 jQuerybeast

Funciona bien para mí.

Eche un vistazo a eso: http://jsfiddle.net/TUL6h/1/ - el fondo es rojo, pero cuando cambia la altura de la parte del resultado cambia a azul en algún punto.

¿Qué navegador estás probando?

Fuente

2012-04-21 19:32:27 MarcinJuraszek

Eso es correcto, pero es un comportamiento correcto, porque 'background: green' anula' background: blue'. Debería escribir algo como esto: http://jsfiddle.net/TUL6h/5/ para lograr eso. – MarcinJuraszek

Esto no funciona. ¿Podría ser esto un problema del navegador? –

No necesariamente, importante se utiliza para anular el css por defecto es decir, para anular los atributos utilizados en el estilo por defecto. Entonces, si hay un nuevo atributo en las consultas de medios, no es necesario que lo use junto con eso.

Fuente

2012-08-22 13:30:34

El uso de! Importante dentro del código contenido en sus consultas @media es una forma efectiva de agregar propiedades de estilo dinámico a los elementos de sus páginas, mientras deja intacto su CSS "predeterminado" para un fácil mantenimiento.

Ejemplo:

<html> 
    <head> 
    <style> 
    @media all and (max-width: 768px) { 

    /* CSS styles targeting screens of smaller sizes and/or resolutions (IE phones and tablets) */ 

     #semantically-named-element p 
     { width: 60% !important; 
     background: rgba(0,0,255,1)!important; 
     margin: auto !important; } 

     #semantically-named-element span 
     { display: none !important; } 

    } 
    /* Look ma no media queries needed for default CSS below! Very easy to discern default styles, when the default code is the stuff not wrapped in queries. Period. */  

    /* Default CSS style attributes for any viewports that do not fit into the low or high resolution/screen size parameters set above and below. Also the fallback for browsers that still disregard CSS media queries */ 
    #semantically-named-element p 
     { width: 90%; 
      background: rgba(255,0,0,1); 
      margin: auto; } 

    #semantically-named-element span 
     { display: block; 
      background: rgba(0,0,0,0.8); 
      color: #FFF; 
      text-align: center;} 
    @media all and (min-width: 968px) { 
    /* CSS styles targeting very large or very high resolution viewports at the 769 pixels wide "break-point" */ 
     #semantically-named-element p 
     { width: 80% !important; 
     background: rgba(0,255,0,1)!important; 
     margin: auto !important; } 

     #semantically-named-element span 
     { display: block !important; 
     background: rgba(0,0,0,0.8)!important; 
     color: #FFF !important; font-size: 200%; } 
    } 
    </style> 
    </head> 

    <body> 
     <div id="semantically-named-element"> 
     <p> Usage of !important inside of the code contained within your @media queries is an effective way to add dynamic style properties to your pages elements, while leaving your 'default' css intact for easy maintenance.<span>hidden until tablet greater 768 viewport pixel width</span></p> 
     </div> 
    </body> 
</html>

Fuente

2013-09-23 00:10:44 NicholasAbrams

En cuanto a su ejemplo en //jsfiddle.net/TUL6h/55/: Es necesario cambiar el orden de las preguntas de los medios. max-height: 510px; incluye altura máxima: 500 px; tiene que estar primero para que se muestre el caso más especial de 500px beeing.

Fuente

2013-10-31 09:51:43 emik

jsfiddle.net/TUL6h/55 no sería mío. El mío fue creado hasta 5. El resto son de usuarios por aquí. – jQuerybeast

Tuve el mismo problema. Me di cuenta de que las consultas de los medios deben estar al final de las hojas de estilo (incluso si está usando/importando varios archivos en su flujo de trabajo).

Fuente

2016-01-24 20:32:17 jhorapb

consultas de medios CSS y! Importante

Respuesta

Cuestiones relacionadas