Frage CSS @media(max-width| min-width) funktioniert nicht richtig

[DerNeuling21]

Hallo zusammen,

ich habe da ein kleines Problem in meiner CSS Datei.
Ich setze für meine Menübar ein paar Funktionen mit der CSS Funktion @media(max-width| min-width).

Wenn ich jetzt am PC die Größe des Browserfensters verändere, dann funktioniert das auch tadellos.
Wenn ich jetzt aber die Seite mit den Smartphone großen anschaue (Google Chrome DevTools), dann funktioniert die CSS Attributvergabe nichtmehr.
Auch auf den Handys werden diese Einstellungen nicht gesetzt. Ich verstehe jetzt leider nicht ganz warum, weil ich mit

@media (min-width: 778px) {
}

und

@media (max-width: 778px) {
}

jetzt eigentlich schon sehr lange sehr erfolgreich arbeite.

Habt ihr eine Idee, warum das auf Smartphone- oder Tablettgroße nicht funktioniert ?

Danke für die Hilfe

 

[MrMurphy]

Ohne die Seite zu kennen kann dir niemand die Frage seriös beantworten. Es kann sein dass der Quellcode Fehler enthält, du Denkfehler machst oder die Endgeräte die CSS-Angaben uminterpretieren.

min-width und max-width gleichzeitig zu setzen ist in der Praxis aber überflüssig. Webseitenersteller sollten sich für eine der Angaben entscheiden und die dann durchziehen, das vermeidet Probleme.

 

[Nicolai]

Versuch das mal in dem Schema:

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

 <- classes here ->
}

Außerdem muss das natürlich im Dokument enthalten sein:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

 

[DerNeuling21]

Versuch das mal in dem Schema:

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

<- classes here ->
}

Außerdem muss das natürlich im Dokument enthalten sein:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

Danke für die Info, aber wie mache ich das in dem <link> wenn ich in der Datei min-width und max-width habe ?

 

[Nicolai]

Hups, das war die falsche Line, meine Schuld.

Die muss in die HTML Datei:

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

Nicht die:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

 

[DerNeuling21]

Hat funktioniert danke

 

[Nicolai]

Kein Problem