@media Query Arbeiten in IE, Firefox und Edge, aber nicht in Chrome

Ich habe eine Medienabfrage erstellt, um ein div-Zeichen (#beispiel in diesem Fall) zu verkleinern, wenn die Bildschirmbreite unter einen bestimmten Punkt fällt. Siehe das Beispiel unten.@media Query Arbeiten in IE, Firefox und Edge, aber nicht in Chrome

@media screen and (max-width: 733px) { 
#example { 
    padding-left: 90px; 
    } 
}

Diese Abfrage funktioniert perfekt in IE 11, Firefox Quantum und Edge. Wenn ich es jedoch in Chrome teste, erhalte ich das gleiche Ergebnis, als wäre die Abfrage gar nicht vorhanden.

Nach einigen Recherchen habe ich leichte Variationen eines Ansichtsfensters Eintrag in meinem HTML-Header hinzugefügt, und im Moment mein Eintrag in <head></head> ist:

<meta name="viewport" content="width=device-width" />

(ich auch „width = geräte- verwendet haben Breite, Anfangsskala = 1 "ohne besseres Ergebnis)

Zuletzt habe ich auch versucht, @media only screen anstelle von @media screen zu verwenden, und das hat auch nicht funktioniert.

Für einige letzte Details ist meine HTML-Datei eine cshtml-Datei, wenn es einen Unterschied macht (dies ist für eine Webanwendung), und ich teste über den Community Debugger VS2017.

Vielen Dank!

Quelle

2017-12-27 pi905

Versuchen, diese zu Ihrem CSS:

@media screen and (max-width:733px), 
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and (-moz-device-pixel-ratio: 2), 
    only screen and (-o-min-device-pixel-ratio: 2/1), 
    only screen and (min-device-pixel-ratio: 2), 
    only screen and (min-resolution: 192dpi), 
    only screen and (min-resolution: 2dppx) 
    { 
     #example 
     { 
      padding-left: 90px; 
     } 
    }

und dies dem <head> Abschnitt des HTML-Dokuments:

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />

Dieser Code getestet und funktioniert. Wenn es nicht für Sie funktioniert, haben Sie möglicherweise Probleme woanders in Ihrem Code, möglicherweise Ihre CSS. In diesem Fall poste bitte einen Link zu deiner Seite oder füge noch mehr Code hinzu, vorzugsweise deinen CSS.

Quelle

2017-12-27 20:51:08 Ivan86

Ihrem Code fehlt eine geschweifte Klammer "}". Unterhalb der richtigen Code:

@media screen and (max-width: 733px) { 
#example { 
    padding-left: 90px; 
} 
}

Quelle

2017-12-27 20:49:50

Danke John. Ich habe versehentlich eine Klammer weggelassen, wenn ich den Beispielcode bearbeitet habe, um ihn generischer für meine Frage zu machen. Ich habe die Frage bearbeitet und den tatsächlichen Code überprüft, um zu bestätigen, dass keine Klammerfehler vorhanden sind. – pi905

@media Query Arbeiten in IE, Firefox und Edge, aber nicht in Chrome

Antwort

Verwandte Themen