zum einfachen umrechnen px-em:
Pixel in EM umrechnen*
zu responsive allgemein:
am einfachsten vom denken her ist desktop --> mobil. Die media-queries beginnen i.d.R. mit max-width.
mobile first (mobil --> desktop) ist der aktuelle 'Weg'. Das schwächste Glied in der Kette (Smartphone) wird zuerst bedient. Die media-queries beginnen i.d.R. mit min-width.
Ich nutze als Basis gern
PocketGrid. In der
Doku gibts jede Menge Beispiele.
Z.B. deine Seite:
die Navigation oben hat 6 Links --> Breite 100%:6
die Footer Navi hat 3 Links --> Breite 100%:3
die Boxen in der Mitte machst genauso --> 100% durch 3 minus seitlicher Abstand
mit media-queries legst dann fest, was sich ab bestimmten Breiten (in em) ändern soll.
zur Navigation: ist machbar, kommt auf den Aufwand an welchen man in Kauf nimmt.
einfachste Variante (wenn man wenig Links hat): kein toggle, alle Links 100% breit, vertikal aufeinander.
nächste Möglichkeit: man nimmt etwas js zu Hilfe. Gibt zig Tutorials dafür.
Die
o.g. Methode mit target (ohne js): ist mehr Aufwand. Habs mal nachgebaut. Ist etwas tricky...