Antworten auf deine Fragen:
Neues Thema erstellen

Website responsive auf dem Smartphone: Header farblich hervorheben?

isarc

Noch nicht viel geschrieben

Hallo

weiß jemand wenn ich bei der Responsive Websites auf dem Smartphone den Header komplett in einer anderen Farbe gestalte..?
Wisst ihr was ich meine?

Vermutlich über Media Queries. Aber welche ID oder Klasse spreche ich an?

Headerfarbe in der Adressleiste:
 

draupnir

Moderator

Teammitglied
1. CSS-Datei, die vom HTML aufgerufen wird:
@charset "UTF-8";
/* Aufrufe der Anpassungen von gross nach klein */
@import url(screenMax.css) only screen and (min-width: 769px);
@import url(screen1024.css) only screen and (max-width: 1024px) and (min-width: 768px);
@import url(screen768.css) only screen and (max-width: 768px);
@import url(screen480.css) only screen and (max-width: 480px);
/* Druck-Version */
@import url(print.css) print;
/* Ende der Datei. */
2. weitere CSS-Dateien wie "screen480.css" mit dem Inhalt:
@charset "UTF-8";
body { background-image: url(../allgemein/screen480.png); }
/* Ende der Datei. */
Statt "body" kannst Du jedes andere Objekt anpassen, verändern, ausblenden, ...

Testen kannst Du es auf Mac oder PC, in dem Du die Breite des Browserfenster veränderst. Ein realer Test auf mobilen Geräten sollte trotzdem nicht unterbleiben. Es gibt immer wieder mal Überraschungen, wie HTML/CSS interpretiert werden.

Wenn Du brauchst, kannst Du mich auch direkt anschreiben.
– Jens.
 

dn3d_fanboy

Aktives Mitglied

Meinst du den Header der Website oder den Header der Browser-App, also die Farbe des Bereichs oben, wo die Adresse, etc. angezeigt wird?

Letzteres kannst du mit folgendem Code im <head> der Seite erreichen:

HTML:
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.634
Beiträge
1.538.448
Mitglieder
67.555
Neuestes Mitglied
scheflo
Oben