Bildschirmgrößen testen mit FF und @media in css, komisches Verhalten.

[Gutschy]

Hallo Leute,

versuche mich gerade im respnosive Webdesign und teste die verschiedenen Bildschirmauflösungen im FireFox.

Erst ging alles wie gewünscht und da hakte es nur noch noch.

Momentan stehe ich vor dem Rätsel warum mein Layout Wechsel, den ich so einleite in meiner CSS-Datei:

@media all and (max-width: 1334px) {
bla
}

schon bei einer Breite von 1456px stattfindet.
Vor allem, es lief erst alles, dann wollte ich eine zweit Stufe einbauen. Mit der zweiten Stufe wurde das Verhalten vom FF unberechenbar

@media all and (max-width: 1120px) {
bla
}

Obwohl die zweite Stufe erst noch leer war reagierte die erste Stufe seltsam, dann die zweite Stufte wieder gelöscht, alles wieder normal, wieder eingebaut, alles Quark. Aber jetzt ist es durchgehend seltsam.

Ich hab dann ein paar mal die Chronik gelöscht, sogar noch den Cache geleert, ohne Effekt.

Habe jetzt zum Schluss für Spass mal @media auf 1600 gestellt, der Layout Wechsel findet jetzt bei 1746px Breite statt.

WTF!!!

Es nervt tierisch! Jemand eine Idee?

Gruss,

Gutschy

 

[Tronjer]

Wird dir ohne weitere Details niemand beantworten können. Bevor du jetzt hier aber lange Code-Blöcke postest oder Seiten verlinkst, denke daran, das Problem soweit herunterzubrechen, dass potenzielle Hilfesteller es unmittelbar erfassen können. Das erhöht die Chance auf zielführende Antworten ungemein.

Für das Verständnis von Responsive Design bietet es sich an, die Basics an möglichst simplen Beispielseiten mit wenig CSS Code zu erlernen. Zu den Grundlagen gehören Begriffe wie Graceful Degradation und Progressive Enhancement, sowie Frameworks mit Grid Layout wie Bootstrap und Foundation. Außerdem werden Breakpoints bei Media Queries nicht willkürlich gesetzt, sondern sollten sich an Auflösungen für Smartphones, Tablets und PC Displays orientieren.

 

[Gutschy]

Ich werde mal das ganze Ding neu schreiben. Ist sowieso Kraut und Rüben.
Und natürlich dann mobil-device first.

 

[MrMurphy]

Hallo

Und natürlich dann mobil-device first.

Technisch ist es vollkommen egal, ob du mobile-first oder desktop first benutzt.

schon bei einer Breite von 1456px stattfindet.

Ohne den Code kann man nur raten: Das könnte daran liegen, das der Zoom-Faktor nicht bei 100% liegt.

Ein Vorteil von Media-Queries ist auch, das die Seite sich bei Vergrößerung des Zoom-Faktors so verhält, als wenn die Fensterbreite verringert wird.

Das kannst du an der folgenden Seite ja mal ausprobieren:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_05_25_kevin_brandao_03_navi_mit_logo.html

Auch bei einer Vergrößerung des Zoom-Faktors muss nicht seitwärts gescrollt werden.

Gruss

MrMurphy