web-dev-qa-db-ger.com

CSS: max-width für @media-Abfrage funktioniert nicht

(Es funktioniert mit anderen Browsern, aber nicht mit Chrom)

Ich möchte einen Stil nur anwenden, wenn die Browsergröße weniger als 1400px beträgt

mit max-width funktioniert nicht

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

mit min-width funktioniert es 

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

Ändert sich aber auch, wenn die Browserbreite über 1400px liegt (ich weiß, dass es funktioniert, aber max-width nicht funktioniert)

Geige dafür

https://jsfiddle.net/j4Laddtk/

17
Divya Barsode

Haben Sie versucht, das Ansichtsfenster hinzuzufügen?

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

Working JSFiddle

Viewport wird beim Rendern von responsiven Seiten verwendet und wird daher meistens bei mobilen Websites verwendet. Bei Medienabfragen hilft es jedoch, dem CSS die tatsächliche Gerätebreite mitzuteilen.

43
Stewartside

Versuchen Sie diese Methode.

Dies wird basierend auf dem Gerät zielgerichtet sein 

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

}

Anzielen basierend auf dem Browserfensterbereich

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

}
9
Prime

Hat Ihr Browser eine ZOOM- Version, die sich von der 100%-Ebene unterscheidet? Setzen Sie (Vergrößern und Verkleinern) auf 100% zurück und prüfen Sie, ob es behoben ist.

2
T.Todua

Das hat bei mir funktioniert

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

das Entwickler-Tool sagte, dass die Größe des Viewports 1400px sei, aber die tatsächliche Breite, die die CSS betrachtete, mehr als 1400px war. Aus diesem Grund funktioniert die Medienabfrage nicht.

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

Wenn dies nicht funktioniert, versuchen Sie es im Browser-Inspect-Element, navigieren Sie im Netzwerk und deaktivieren Sie den deaktivierten Cache . Manchmal funktioniert es nicht für den Browser-Cache.

Glückliche Kodierung

0
Abdul Barik

Das Entwicklertool gab an, dass die Größe des Ansichtsfensters 1400 Pixel beträgt, die tatsächliche Breite, die das CSS berücksichtigte, jedoch mehr als 1400 Pixel. Aus diesem Grund funktioniert die Medienabfrage nicht.

0
Divya Barsode