Warum werden unterschiedliche Angaben bei meinem responsiven Webdesign nicht ausgeführt?

Hallo,

ich erstelle gerade eine Webseite und wende RWD an. Die Seiten sollen auf einem Smartphone, einem Tablet und einem PC unterschiedlich aussehen. Die Anweisungen für Smartphones werden korrekt ausgeführt. Auf Tablets und PC - Monitoren sieht aber alles gleich aus. Ich habe auch schon verschiedene Bildschirmgrößen getestet.

Egal ob ich Schriftgrößen, Breiten usw. eingebe, es wird nur die zuletzt eingegebene Anweisung ausgeführt. Hier mal ein Beispiel:

.inhalt {
    width: 90%;  /* für Smartphone */
}

@media only screen and (min-width: 600px) {

.inhalt {
    width: 80%;  /* für Tablet */
}

}

@media only screen and (min-width: 768px) {

.inhalt {
    width: 60%;  /* für PC */
}

}

In dem Beispielcode hier wird auf einem Tablet und einem PC immer die Breite von 60% angezeigt, obwohl ich für das Tablet eine Breite von 80% eingetragen habe.

Vielen Dank für jede Hilfe.

Answer 1

[medmonk]

Hier wäre interessant zu wissen, wie dass dazugehörige HTML ausschaut. Unabhängig dessen scheint es so, dass du die Werte für die Breiten eher willkürlich gesetzt hast und nicht weil sie so in der Form wirklich Sinn ergeben würden.

Wie und womit überprüfst du denn, ob die Media Queries angewendet werden? Ich kann in dem CSS jetzt kein Fehler entdecken. Wobei du in diesem Fall auch gänzlich ohne Media Queries dasselbe oder ein recht ähnliches Ergebnis erreichen würdest.

min() Function:

.content {
  /* min-width: 100% - 2em, max-width: 75em */
  width: min(100% - 2em, 75em);
}

CSS Nesting, Media Queries:

.content {
  --_content-width: 90%;
  /* Variable, Calc-Function as fallback */
  width: var(--_content-width, calc(100% - 2em));
  
  /* 600px / 16 = 37.5em */
  @media(min-width: 37.5em) {
    --_content-width: 80%;
  }
  
  /* 468px / 16 = 48em */
  @media(min-width: 48em) {
    --_content-width: 60%;
  }
}

Woher ich das weiß: Berufserfahrung – UI/UX Designer, Full-Stack Developer

Comments

[Visierhoch]

@medmonk

Hallo und danke für die Antwort.

Ich hatte vermutet, dass ich bei den Media Queries einen Fehler gemacht habe, da ja die Ansicht für Smartphones korrekt funktioniert. Dann wird wahrscheinlich irgendein Eintrag, bei den CSS - Anweisungen etwas überschreiben.

Also werde ich jetzt mal mit dem "auskommentieren" beginnen.

Vielen Dank nochmal.

[medmonk]

@Visierhoch

Ich habe dein CSS eins zu eins übernommen und keiner Fehler entdeckt. Was zur visuellen Kontrolle hilfreich sein kann, wenn du einfach eine sichtbare Eigenschaft festlegst. Beispielsweise das Ändern der Hintergrundfarbe.

Die „screen” Angabe kannst du eigentlich auch weglassen und nicht zwingend mit angegeben werden muss. Damit kannst du dir dann etwas Schreibarbeit sparen. Ansonsten halt ohne MQ und stattdessen mit CSS-Funktionen arbeitest.

.content {
  width: 90%;
  background-color: red;
}

@media(min-width: 600px){
  .content {
    width: 80%;
    background-color: green;
  }
}

@media(min-width: 768px){
  .content {
    width: 80%;
    background-color: blue;
  }
}

Alternativ neuer mit CSS Nesting:

.content {
  width: 90%;
  background-color: red;
  
  @media(min-width: 600px) {
    width: 80%;
    background-color: green;
  }

  @media(min-width: 768px) {
    width: 60%;
    background-color: blue;
  }
}

LG medmonk