CSS - Problema con @media query y matchmedia()

 
Vista:

Problema con @media query y matchmedia()

Publicado por Franti (1 intervención) el 12/06/2019 20:10:23
Hola tengo un problema con un proyecto,
resulta que si ejecuto esto en javascript

1
2
3
4
5
6
7
var mediaquery1 = window.matchMedia("(min-width:1320px)");
if (mediaquery1.matches) {
   $(".content").css("margin-left","345px");
		$(".f1").css("margin-left","345px");
		$(".f2").css("margin-left","345px");
		$(".f3").css("margin-left","345px");
}

Deja de funcionar esto en mi css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@media all and (min-width:1320px) {
.content { margin-left:345px;}
footer .f1 { margin-left:345px; }
footer .f2 { margin-left:345px; }
footer .f3 { margin-left:345px; }
}
@media all and (max-width: 1570px) {
.content { margin-left:325px;}
footer .f1 { margin-left:325px; }
footer .f2 { margin-left:325px; }
footer .f3 { margin-left:325px; }
}
@media all and (max-width: 1540px) {
.content { margin-left:305px;}
footer .f1 { margin-left:305px; }
footer .f2 { margin-left:305px; }
footer .f3 { margin-left:305px; }
}
@media all and (max-width: 1510px) {
.content { margin-left:285px;}
footer .f1 { margin-left:285px; }
footer .f2 { margin-left:285px; }
footer .f3 { margin-left:285px; }
}
@media all and (max-width: 1480px) {
.content { margin-left:265px;}
footer .f1 { margin-left:265px; }
footer .f2 { margin-left:265px; }
footer .f3 { margin-left:265px }
}
@media all and (max-width: 1455px) {
.content { margin-left:250px;}
footer .f1 { margin-left:250px; }
footer .f2 { margin-left:250px; }
footer .f3 { margin-left:250px; }
}

Si ejecuto ese script deja de funcionar esos @media query... al recargar la pagina vuelve a funcionar el css pero si ejecuto de nuevo el script deja de funcionar el css hasta que vuelvo a recargar.

Alguien puede ayudarme?

Gracias de antemano.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de juan jose
Val: 196
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Problema con @media query y matchmedia()

Publicado por juan jose (54 intervenciones) el 17/07/2019 20:36:44
si realmente esa parte de script o jquery te da problema comentalo en el script y si todo va bien lo eliminas o lo deja comentado, como gustes
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 18
Ha disminuido su posición en 3 puestos en CSS (en relación al último mes)
Gráfica de CSS

Problema con @media query y matchmedia()

Publicado por SoyLaTrufa (6 intervenciones) el 12/09/2019 22:10:48
Eso te sucede seguramente porque primero carga el css y luego el js. Entonces el js te pisa los @media query.

Te sugiero usar los @media query en css y en js sólo para algun caso muy especifico

saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar