Warum funktionieren meine CSS3-Medienabfragen nicht?

In der Datei styles.css verwende ich Medienabfragen, die beide eine Variation von:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

Die Größe der Websites wird in einem normalen Browser (Safari, Firefox) auf das gewünschte Layout angepasst, wenn ich das Fenster verkleinere. Das mobile Layout wird jedoch auf einem Telefon überhaupt nicht angezeigt. Stattdessen sehe ich nur das Standard-CSS.

Kann mich jemand in die richtige Richtung weisen?

Alle drei waren hilfreiche Tipps, aber es sieht so aus, als müsste ich ein Meta-Tag hinzufügen:

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

Jetzt scheint es sowohl in Android (2.2) als auch auf dem iPhone zu funktionieren ...

Vergessen Sie nicht, die Standard-CSS-Deklarationen über der Medienabfrage zu haben, da die Abfrage sonst auch nicht funktioniert.

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

Ich vermute, dass das Schlüsselwort onlyhier das Problem sein könnte. Ich habe keine Probleme mit Medienabfragen wie diesen:

@media screen and (max-width: 480px) { }

Ich habe Bootstrap in einer Presseseite verwendet, aber es hat nicht auf IE8 funktioniert. Ich habe css3-mediaqueries.js Javascript verwendet, aber immer noch nicht funktioniert. Wenn Sie möchten, dass Ihre Medienabfrage mit dieser Javascript-Datei funktioniert, fügen Sie Ihrer Medienabfragezeile in CSS einen Bildschirm hinzu

Hier ist ein Beispiel :

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


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

CSS-Link-Zeile so einfach wie die obige Zeile.

Heute hatte ich eine ähnliche Situation. Medienabfrage hat nicht funktioniert. Nach einer Weile fand ich, dass das Leerzeichen nach 'und' fehlte. Die richtige Medienabfrage sollte folgendermaßen aussehen:

@media screen and (max-width: 1024px) {}

Die Reihenfolge des CSS-Codes ist ebenfalls wichtig, zum Beispiel:

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

Der obige Code funktioniert aufgrund der ausgeführten Bestellung nicht. Müssen wie folgt schreiben:

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}

Erwähnen Sie in einigen Einheiten wie px oder rem immer die maximale und minimale Breite. Das hat es für mich herausgefunden. Wenn ich es ohne das Gerät und nur den Zahlenwert schreibe, kann der Browser die Medienabfragen nicht lesen. Beispiel: Dies ist falsch @ nur Medienbildschirm und (maximale Breite: 950) und dies ist richtig @ nur Medienbildschirm und (maximale Breite: 950px)

Wirf eine weitere Antwort in den Ring. Wenn Sie versuchen, CSS-Variablen zu verwenden, schlägt dies leise fehl.

@media screen and (max-device-width: var(--breakpoint-small)) {}

CSS-Variablen funktionieren nicht in Medienabfragen (beabsichtigt).

Seltsamer Grund, den ich noch nie gesehen habe: Wenn Sie einen Selektor "Eltern> Kind" außerhalb der Medienabfrage (in Firefox 69) verwenden, kann die Medienabfrage beschädigt werden. Ich bin nicht sicher, warum dies passiert, aber für mein Szenario hat dies nicht funktioniert ...

@media whatever {
    #child { display: none; }
}

Wenn Sie jedoch das übergeordnete Element hinzufügen, um es mit einem anderen CSS weiter oben auf der Seite abzugleichen, funktioniert dies ...

#parent > #child { display: none; }

Es scheint, als ob die Angabe des übergeordneten Elements keine Rolle spielen sollte, da eine ID sehr spezifisch ist und keine Mehrdeutigkeit bestehen sollte. Vielleicht ist es ein Fehler in Firefox?

Das Code-Snippet des OP verwendet eindeutig das richtige Kommentar-Markup, aber CSS kann progressiv unterbrochen werden. Wenn also ein Syntaxfehler auftritt, schlägt wahrscheinlich alles danach fehl. Ein paar Mal habe ich mich auf vertrauenswürdige Quellen verlassen, die ein falsches Kommentar-Markup geliefert haben , das mein Stylesheet beschädigt hat. Da das OP nur einen kleinen Teil seines Codes bereitstellte, würde ich Folgendes vorschlagen:

Stellen Sie sicher, dass alle Ihre CSS-Kommentare dieses Markup verwenden /*... */- Dies ist das richtige Kommentar-Markup für CSS gemäß MDN

Validieren Sie Ihr CSS mit einem Linter oder einem sicheren Online-Validator. Hier ist einer von W3

Weitere Informationen: Ich habe die neuesten empfohlenen Haltepunkte für Medienabfragen von Bootstrap 4 überprüft und die Kesselplatte direkt aus den Dokumenten kopiert. Fast jeder Codeblock war mit Kommentaren im Javascript-Stil beschriftet //, die meinen Code brachen - und mir nur kryptische Kompilierungsfehler zur Fehlerbehebung gaben, die mir damals über den Kopf gingen und mich traurig machten.

Mit dem IntelliJ-Texteditor konnte ich bestimmte Zeilen von CSS in einer WENIGER-Datei mit der Tastenkombination Strg + / auskommentieren. Dies war großartig, außer dass //standardmäßig nicht erkannte Dateitypen eingefügt wurden . Es ist keine Freeware und weniger ist ziemlich Mainstream, also habe ich ihm vertraut und mich dafür entschieden. Das hat meinen Code gebrochen. Es gibt ein Einstellungsmenü, um ihm das richtige Kommentar-Markup für jeden Dateityp beizubringen.

Ich bin auch kürzlich auf dieses Problem gestoßen und habe später herausgefunden, dass es daran liegt, dass ich kein Leerzeichen zwischen andund gesetzt habe (. Das war der Fehler

@media screen and(max-width:768px){
}

Dann habe ich es geändert, um es zu korrigieren

@media screen and (max-width:768px){
}

Das Einfügen eines Meta-Tags wie unten kann dazu führen, dass der Browser das Zoomen des Ansichtsfensters anders behandelt.

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

Ich benutze je nach Methode ein paar Methoden. Im selben Stylesheet verwende ich: @media (max-width: 450px) oder stelle sicher, dass der Link korrekt in der Kopfzeile ist. Ich habe mir Ihr Fixmeup angesehen und Sie haben eine verwirrende Reihe von Links zu CSS. Es wirkt wie Sie sagen auch auf HTC Wunsch S.

@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

Für mich hatte ich max-heightstatt angegeben max-width.

Wenn du das bist, ändere es!

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

Dies kann auch passieren, wenn die Zoomstufe des Browsers nicht korrekt ist. Der Zoom Ihres Browserfensters sollte 100% betragen. Verwenden Sie Ctrl + 0in Chrome , um die Zoomstufe zurückzusetzen.