Responsivität
Um eine Seite responsiv zu gestalten, also auf allen zur Verfügung stehnenden Breiten vernünftig aussehen zu lassen, benötigt man eine grundlegende Technik: Media Queries.
Eine Media Query umfasst einen Codebereich, der ab oder bis zu einer bestimmten Breite des Viewports gelten soll. Du schreibst bspw:
@media (max-width: 800px) {
.meine-klasse {
/* Regeln, die nur bis 800px Breite gelten */
}
}
@media (min-width: 801px) {
.meine-klasse {
/* Regeln, die nur ab 801px Breite gelten */
}
}
Bilder responsive machen
Jedem Bild, das sich über wechselnde Breiten skalieren soll und bei dem die Quelle nicht wechseln soll, sollte diese Klasse mitgegeben werden:
.flexible {
width: 100%;
max-width: 100%;
height: auto;
}
Der Klassenname ist natürlich individuell wählbar, dies ist nur ein Vorschlag.
Bilder responsive einbinden
- Mein einführender Artikel von 2014
- A Guide to Responsive Images with Ready-to-Use Templates
- Responsive Images 101 (eine umfangreiche und tolle Serie)