Frage Probleme bei Responsive Design: Skaliert nicht

[Rawir X]

Ich habe Probleme mit "Responsive Design":
Ich habe jetzt schon 7 verschiedene Varianten mit JavaScript ausprobiert, u.a.

• http://www.mediaevent.de/javascript/lib-jquery-Plugins.html
• http://www.olivergast.de/blog/2012/09/29/css3-ein-responsives-flyout-menu/
  
• http://www.olivergast.de/blog/2015/05/22/css-ein-horizontales-dropdown-menue-responsive-gestalten/

Keines der vorgeschlagenen Designs hat funktioniert bzw. nur so, dass es immer nur eine Bildschirm-Weite gab, egal, wie ich die Webseite skaliert habe.

Speziell @media funktioniert bei mir gar nicht. Mein Browser (neuester Firefox) interpretiert immer nur den letzten @media-Eintrag, egal wie ich skaliere.

Schließlich bin ich auf die if-else Anweisung gestoßen und dachte mir: Des Problems Lösung!
Aber nöööö - nicht mal das klappt! Unten eben jenes Beispiel:
http://www.d-dombrowski.de/if_else/

Hier das für diesen Effekt gefundene JS:

<script language="Javascript">
<!--
if (screen.width < 400) {
document.location = "400.htm";
}
if (screen.width < 641) {
document.location = "640.htm";
}
else if (screen.width < 801) {
document.location = "800.htm";
}
else if (screen.width < 1025) {
document.location = "1024.htm";
}
else if (screen.width > 1024) {
document.location = "1024plus.htm";
}
//-->
</script>

So langsam weiß ich echt nicht, wieso das mit dem "Responsieren" bei mir nicht funktioniert *verzweifel*

 

[SpiceLab]

Keines der vorgeschlagenen Designs hat funktioniert bzw. nur so, dass es immer nur eine Bildschirm-Weite gab, egal, wie ich die Webseite skaliert habe.

Speziell @media funktioniert bei mir gar nicht. Mein Browser (neuester Firefox) interpretiert immer nur den letzten @media-Eintrag, egal wie ich skaliere.

Da sind Dir dann bei der Umsetzung wohl diverse syntaktische Fehler unterlaufen. Mehr lässt sich derzeit dazu nicht sagen.

So langsam weiß ich echt nicht, wieso das mit dem "Responsieren" bei mir nicht funktioniert *verzweifel*

Wir auch nicht, solange wir Deinen Versuch nicht gesehen haben.

Ich habe jetzt schon 7 verschiedene Varianten mit JavaScript ausprobiert, u.a.

• http://www.mediaevent.de/javascript/lib-jquery-Plugins.html
• http://www.olivergast.de/blog/2012/09/29/css3-ein-responsives-flyout-menu/
  
• http://www.olivergast.de/blog/2015/05/22/css-ein-horizontales-dropdown-menue-responsive-gestalten/

Übrigens befasst sich Dein erstgenannter Link nicht mit responsiven Design, und die beiden letztgenannten greifen dabei überhaupt nicht auf JavaScript zurück.

Und die Skalierung des Browserfensters zeigt keine Wirkung mit dem gefundenen / gezeigten Script, weil es lediglich die Breite des Bildschirms abfragt, was Du mit innerWidth verwechselst.