Viewport CSS/JS

[Auge]

Hallo

In den Media-Querys kann ich es ja nicht reinschreiben - oder?

Du kannst auch mehrere Media Queries verwenden. Z.B. eine für device-width < 520, eine für device-with zwischen 520 und 900 und eine für über 900.

Das ist so nicht ganz ideal. Die Aufzählung „<520px“, „520px-900px“ und „>900px“ fällt auseinander, wenn der TO irgendwann mal auf jemanden hört, der z.B. die Einheit „em“ statt „px“ empfiehlt. Glaube mir, so jemand wird kommen (und er wird mMn recht haben). Dann ergeben sich nämlich, selbst mit Nachkommastellen im Wert, Lücken. Zudem ist die Logik inkonsistent.

Besser™ ist es, nach der Logik „Mobile first“ zu verfahren. Dabei werden zuerst die Regeln für schmale Viewports ohne Media-Query notiert. Mit Media-Queries für breitere Viewports werden diese Regeln ergänzt und überschrieben.

body {
  color: #000;
}

@media screen and (min-width: 36em) {
  body {
    color: #048;
}

@media screen and (min-width: 56em) {
  body {
    color: #c20;
}

Das hat den Vorteil, nur in eine Richtung (Mindestbreite) Vorgaben für die Anwendung der Regeln zu machen. Kein „von bis“, nur ein „ab“. Das kann man, wie im Beispielcode zu sehen, mehrfach überschreiben.

Tschö, Auge