HTML Desktop Mobile

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen,

zunächst einmal: ich kenn mich nicht wirklich gut mit HTML aus.
Nebenbei verdiene ich mir mit Spreadshirt etwas Geld und versuche dort gerade meine Website zu optimieren.

Bei Spreadshirt kann man einen Header, Footer und CSS einfügen.
Ich hab im Header Tabs eingefügt, funktioniert alles super.

Mein Problem: Die Tabs passen auf dem Desktop locker in eine Zeile.
Mobile nehmen sie zwei Zeilen ein.

Kann man irgendwie zwei unterschiedliche HTML-Header für Desktop und Mobile definieren?
Sprich: Für Mobile zwei Tabs weniger definieren…

Beste Grüße

2

Mobile ist in dem Zusammenhang ein dehnbarer Begriff, umfasst er neben den Smartphones (m.v. Auflösungen) auch Tablets (m.v. Auflösungen), sowie deren jeweiliges Hoch- u. Querformat (orientation: portrait|landscape) :wink:

So wird es auch mehr als blos zwei Fälle geben, bei welcher Displaygröße wieviele Tabs in eine Zeile passen.

Wenn kein CSS-Framework wie Bootstrap am Start ist, aber auch nicht in das Projekt integriert werden soll, um die Seite automatisch der Größe des jeweiligen Ausgabemediums anzupassen („Mobile“ ist in dem Zusammenhangdehnbar, und im kleinsten Fall dem Nutzer das sog. „Hamburger Menü“ anzubieten (siehe die Bootstrap-Navigation bei schmalem Fenster u. http://getbootstrap.com/components/#navbar ), oder alternativ mit den Helferklassen ( http://getbootstrap.com/css/#helper-classes-show-hide bzw. http://getbootstrap.com/css/#responsive-utilities ) einzelne Elemente zu verstecken, lässt sich das „manuell“ mit Hilfe der CSS Media Queries in Kombination mit einer .hidden-Klasse und der display:none-Eigenschaft umsetzen.

Zwei separate HTML-Varianten des Menüs für Desktop und Mobile sind somit überflüssig.