nicht angemeldet
Matthias ScharwiesServus!
Vielen Dank Matthias Scharwies,
mit wenigen Ausnahmen verwendete ich für die Schrift schon em.
Das Layout (div) ist allerdings Breitenangaben und in px. Muss mir dann etwas einfallen lassen, da ich bisher mein Menue links und fixiert hatte um immer darauf zugreifen zu können - nur die rechte Seite (Inhalt) ist scrollbar.
Das ist für Desktop-Layout ja auch völlig ok:
Lass dieses CSS so wie es ist und klammer' es in die media queries
@media (min-width: 50em) { /* Desktop-Layout */ } {
/* bisherige Festlegungen */
}
Vorher legst Du ein mobile CSS fest. Dort wird Dein Menü 100% breit, nicht fixiert und untereinander dargestellt.
Auf breiten Bildschirmen trifft das Medienmerkmal der Abfrage zu und dein Menü wird links und fixed dargestellt.
Außerdem gibt es einige Seiten mit Übersichts-Tabellen. (z.B. Größentabellen)
Höhenangaben habe ich bisher eigentlich nur bei Fotos die ich in 2 Größen erstellte (Vorschaubilder und normale Größe). (lightbox)
Da ich bisher auf Darstellung Wert legte sind Fotos entweder mit float oder bei mehreren Fotos auch in einem div-container erstellt. Alle Bilder haben auch einen alt.Text - der mit Hilfe der Maus sichtbar sind.
Alle Bilder erhalten 100% Breite und kein float; in der Desktop-Media query sind die bisherigen Einstellungen notiert.
Ich sehe daher einige Probleme auf mich zukommen und werde mich mal damit auseinandersetzen um festzustellen ob es mit responsive Design (media queries), sowie einigen Änderungen in CSS möglich ist.
Zumindest eine Verbesserung des Ist-Zustands bei mobilen Geräten.
Alle Seiten mit dem neuen html u CSS 3 neu zu schreiben scheint mir doch zu aufwendig. Bin bereits im Rentenalter und möchte das Ergebnis ja noch selber erleben ;-)
Das muss man im Normalfall (außer es handelt sich um Frames oder Tabellen-Layout) auch nicht. Gut wäre es, in allen Dateien den neuen Doctype und die Viewport-Einstellung einzufügen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
(Utf-8 natürlich nur, wenn die Dateien auch in utf-8 gespeichert sind.)
Herzliche Grüße
Matthias Scharwies
Es gibt viel zu tun: ToDo-Liste
Gunnar Bittersmann
Auge