web-dev-qa-db-fra.com

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

(Cela fonctionne sur d'autres navigateurs mais pas sur chrome)

Je souhaite appliquer un style uniquement lorsque la taille du navigateur est inférieure à 1400 pixels.

avec max-width ne fonctionne pas

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

avec min-width son fonctionnement 

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

Mais change également lorsque la largeur du navigateur est supérieure à 1400px (je sais que c'est comme ça que ça fonctionne mais max-width ne fonctionne pas)

Violon pour ça

https://jsfiddle.net/j4Laddtk/

htmlcsshtml5css3media-queries
17
Divya Barsode

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

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

Travailler JSFiddle

Viewport est utilisé lors du rendu de pages réactives. Il est donc principalement utilisé pour les sites Web mobiles. Toutefois, lorsqu'il traite des requêtes multimédia, il indique au CSS quelle est la largeur réelle du périphérique.

43
Stewartside

Essayez cette méthode.

Cela ciblera basé sur le périphérique 

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

}

Pour cibler en fonction de la fenêtre du navigateur

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

}
9
Prime

Votre navigateur ZOOM- est-il différent du niveau 100%? Réinitialisez (zoom avant et arrière) sur 100% et voyez si c'est corrigé.

2
T.Todua

Cela a fonctionné pour moi

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

l'outil de développement disait que la taille de la fenêtre d'affichage était de 1400 pixels, mais que la largeur réelle envisagée par css était supérieure à 1 400 pixels. Pour cette raison, la requête des médias ne fonctionne pas.

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

Si cela ne fonctionne pas, essayez dans l'élément d'inspection du navigateur de naviguer sur le réseau et de basculer le cache désactivé . Parfois, cela ne fonctionne pas pour le cache du navigateur.

Bonne codage

0
Abdul Barik