css - tesis - Eliminar antecedentes en consultas de medios específicos

tesis implementacion de una biblioteca virtual

Question

Quiero que mi fondo desaparezca cuando se alcanza un tamaño de pantalla específico. Aquí está mi código CSS ...

@media only screen and (min-width: 0px) and (max-width: 479px) {
        .videohome { background-image: none; background-color:#fefefe; }
    }

.videohome {
        background: url(images/extras/homevideobg.png) repeat-x #e6e6e6;
    }

Entonces cuando lo veo en Google Chrome con un tamaño de pantalla de 479px; el fondo todavía está allí ...

Aquí está el elemento de inspección,

Inspeccionar Elemento - Google Chrome

www.mysite.com/media="all"
.videohome {
background: url(images/extras/homevideobg.png) repeat-x #e6e6e6;
}
___________________________________

www.mysite.com/media="all"
@media only screen and (max-width: 479px) and (min-width: 0px)
.videohome {
background-image: none;  <-- this part is Striked Through
background-color: #fefefe;  <-- this part is Striked Through
}

¿Qué estoy haciendo mal? Es importante la orden?

Answer 1

A menudo, deberá usar !important en la regla en una consulta de medios específica para anular la regla definida fuera de las consultas.

Por ejemplo, en su consulta de medios, intente esto:

.videohome { background-image: none !important; background-color:#fefefe; }

Answer 2

Sin embargo, el orden es importante. Además, asegúrese de no establecer otro fondo para su .videohome después de cualquier consulta media. Por lo general, las consultas de SO siempre van en último lugar. Si las cosas se ponen feas, recuerda lo importante. palabra clave después de cualquier declaración css, pero muy cuidadoso con ella, ya que generalmente es mejor no usarla a menos que sea absolutamente necesario.

Answer 3

Sí, el orden de los selectores es importante ya que la hoja de estilo se lee de arriba a abajo (esa es la naturaleza en cascada de CSS). Esto significa que debe colocar el CSS de consulta de medios debajo de la declaración inicial si desea que se anule.

Si cambiar el orden del CSS no resuelve su problema, entonces el problema es la especificidad . Simplemente aumente la especificidad del selector dentro de la consulta de medios para anular efectivamente el otro CSS.

Ejemplo aquí

@media only screen and (max-width: 479px) and (min-width: 0px) {
    .videohome {
        background: none;
    }
}