CSS: max-width pour la requête @media ne fonctionne pas

(Ça marche sur les autres navigateurs mais pas chrome)

Je veux appliquer un style uniquement lorsque la taille du navigateur est à moins de 1400px

avec max-width pas de travail

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

avec min-width son travail

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

Mais modifie également lors de la largeur du navigateur est au-dessus de 1400px (je sais c'est comment il fonctionne, mais max-width n'est pas de travail)

Violon pour cette

https://jsfiddle.net/j4Laddtk/

source d'informationauteur Divya Barsode

  1. 34

    Avez-vous essayé d'ajouter de la fenêtre d'affichage?

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

    Travail JSFiddle

    Fenêtre d'affichage est utilisé lors du rendu des pages pertinentes et est donc surtout utilisé lorsque vous traitez avec des sites web pour mobile, mais lorsque vous traitez avec les media queries, il permet de dire la CSS que le device-width est.

  2. 7

    Essayer cette méthode.

    Cela permettra de cibler en fonction de l'appareil 

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

}

    À cibler en fonction de la fenêtre du navigateur de la zone

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

}
  3. 2

    Cela a fonctionné pour moi

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

    le développeur de l'outil a été de dire que la taille de la fenêtre d'affichage est 1400px mais la largeur réelle de la css envisage de a été plus de 1400px. En raison de ce les médias requête ne fonctionne pas.