Responsive Design
Es hat mich schon seit einiger Zeit genervt, und nun habe ich endlich etwas dagegen unternommen: Wenn man meine Homepage auf dem Handy oder anderen mobilen Geräten öffnet, musste man ständig zoomen und scrollen, und es sah einfach nicht schön aus.
Es gibt zwar diverse Anleitungen dazu, allerdings fehlte mir dort sehr oft ein Beispiel zur konkreten Umsetzung. Deshalb hier in Kurzform meine Lösung.
Zuerst sollte man im head jeder HTML-Seite den Viewport setzen, indem man z.B. folgende Zeile einfügt:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Anschließend editiert man seinen Stylesheet (man kann auch eine separate CSS-Datei anlegen, allerdings lädt der Browser sowieso alle Dateien, weshalb ich meine vorhandene Datei verwendet habe):
@viewport {
width: device-width;
zoom: 1;
}
@media (min-width: 750px) { /* Desktop o. Tablet */
#top
{
height: 300px;
width: 700px;
}
.maintable
{
width: 728px;
}
}
@media (max-width: 750px) { /* Mobile Device */
#top
{
height: 200px;
width: 100%;
background-position: bottom;
}
.maintable
{
width: 100%;
}
}
#top und .maintable sind Beispiele für Elemente, deren Design sich bei kleineren Displays (Breite unter 750 Pixel) verändern soll. In meinem Fall soll das Festbreiten-Design sich dann dynamisch an die Displaygröße anpassen.
In der CSS-Datei folgen anschließend noch die Elemente, die bei allen Geräten identische Eigenschaften haben. Wer möchte, kann zusätzlich (z.B. für Tablets) noch weitere Stufen definieren, ich habe mich jedoch auf eine Grenze bei 750 Pixel beschränkt um Handys unter 5 Zoll anzusprechen.
Eine wichtige Erkenntnis noch zum Schluss: Unbedingt Layout und Design trennen, also keine Breiten- oder Höhenangaben in den HTML-Seiten unterbringen sondern alles in die CSS-Datei(en) auslagern.
Viel Spaß beim Probieren  |
Kommentare
noch keine Kommentare
|
Kommentar schreiben
|
| Design: © S.I.S.Papenburg / www.on-mouseover.de/templates/ | |