html - attribute - CSS: ancho máximo para la consulta @media no funciona

title html attribute

Question

(Funciona en otros navegadores pero no en chrome)

Quiero aplicar un estilo solo cuando el tamaño del navegador sea inferior a 1400px

con max-width no funciona

@media only screen and (max-width:1400px)  {
.heading-left {
    left: -0.5%;
  }
}

con min-width su trabajo

@media only screen and (min-width:480px)  {
.heading-left {
    left: -0.5%;
   }
}

Pero también se altera cuando el ancho del navegador está por encima de 1400px (sé que es así como funciona pero el ancho máximo no funciona)

Violín para esto

https://jsfiddle.net/j4Laddtk/

Answer 1

¿Has intentado agregar el viewport en?

<meta name="viewport" content="width=device-width, initial-scale=1">

Trabajando JSFiddle

La ventana gráfica se usa cuando se representan páginas de respuesta y, por lo tanto, se usa principalmente cuando se trata de sitios web móviles, pero cuando se trata de consultas de medios, ayuda a indicar al CSS cuál es el ancho real del dispositivo.

Answer 2

¿Su navegador tiene un nivel de ZOOM diferente al 100% ? Restablecer (acercar y alejar) al 100% y ver si está arreglado.

Answer 3

Debe colocar las consultas @media después de declarar su estándar

Answer 4

Esto funciono para mi

@media screen and (max-width: 700px) and (min-width: 400px) { 
    .heading-left { left: -0.5%; }
}

Answer 5

Prueba este método.

Esto apuntará basado en dispositivo

@media screen 
 and (max-device-width: 1400px) 
 and (min-device-width: 480px) 
{ 
   .heading-left {
    left: -0.5%;
   }

}

Para apuntar basado en el área de la ventana del navegador

@media screen 
 and (max-width: 1400px) 
 and (min-width: 480px) 
{ 
   .heading-left {
    left: -0.5%;
   }

}

Answer 6

la herramienta de desarrollo decía que el tamaño de la ventana gráfica es 1400px pero el ancho real que el css estaba considerando era más de 1400px. Debido a esto, la consulta de medios no está funcionando.

Answer 7

@media only screen and (max-width: 1000px) {
  /*Don''t forget to add meta viewport in your html*/
}

Si no funciona, intente en el elemento de inspección del navegador, navegue por la red y cambie la memoria caché deshabilitada. A veces no funciona para el caché del navegador.

Feliz codificacion