Nochmal Responsives Webdesign

Computer: Software & Programmierung HTML & CSS
#1

Moin…Moin…

Jetzt habe ich mich mit dem Reponsiven Webdesign beschäftigt:

Ich weiss zumindest jetzt, dass man für mobile Browser zunächst ein „Meta Viewport Element“ in den header setzen muss: Dadurch werden die definierten Media Queris geladen.

Ein Beispiel für definierte Media Queries: @media screen and (max-width: 1024px) (
CSS… )

Jetzt meine Fragen dazu: Setzt man das definierte Media Querie in den Header?

Soetwas habe ich jetzt in einem Beispiel mit Handy gesehen. Auf dem Handy sah man allerdings nur die Kopfzeile und den Content - aber z.B. nicht die Navigation.

Ist es denn nicht so, dass mit den Media Queries die Seite auch ganz (evtl. verkleinert) angezeigt wird?

Wäre nett, wenn mir darauf jemand antworten könnte…

#2

Hallo,

Ich weiss zumindest jetzt, dass man für mobile Browser
zunächst ein „Meta Viewport Element“ in den header setzen
muss:
Dadurch werden die definierten Media Queris geladen.

nein, dadurch weist Du an, daß als Device-Breite die tatsächliche horizontale Breite in Pixel genutzt wird.

Jetzt meine Fragen dazu: Setzt man das definierte Media Querie
in den Header?

Nein, die Media-Queries sind CSS und gehören daher in die CSS-Datei.

Soetwas habe ich jetzt in einem Beispiel mit Handy gesehen.
Auf dem Handy sah man allerdings nur die Kopfzeile und den
Content - aber z.B. nicht die Navigation.

Vermutlich verbarg sich da die Navigation hinter einem kleinen Button, den man klicken muss. JavaScript ist Dein Freund.

Ist es denn nicht so, dass mit den Media Queries die Seite
auch ganz (evtl. verkleinert) angezeigt wird?

Mit Media-Queries kannst Du alles mögliche anstellen. Warum man eine Seite von z.B. 4000px Höhe und 1280px Breite auf ein 800 x 400 Display schrumpfen sollte erschießt sich mir nicht.
Du kannst aber mit MQ mehrspaltige in einspaltige Design ändern, Elemente ausblenden etc.

Gruß

osmodius

#3

Jetzt habe ich mich mit dem Reponsiven Webdesign beschäftigt:

Habe ich auch :smile:
Nach einigen Versuchen habe ich diese Lösung genutzt:
ein Template von JoomShine beschafft. Das Ergebnis:
http://waveswebdesign.de/Respons/
Wave