Richtlinien für responsives css

Meine Vorgehensweise for responsives css und festen Pixelverhältnissen

    Inhaltsangabe
  1. Prozentuale Werte
  2. Feste Pixelwerte
  3. Feste Verhältnisse
    1. Viewport Width
    2. Padding top

Heute beschäftige ich mich ausschließlich mit dem Thema responsives Verhalten von der Koran Seite vom Islam Archiv Projekt. Es soll den Benutzern möglich sein, sich die Koran Übersichtsseite in jedem beliebigen Format anzusehen und es bequem zu bedienen.

Prozentuale Werte

Die erste Regel um responsive css zu programmieren ist es, solange es unvermeidlich ist, prozentuale werde anstelle von Pixeln anzugeben. Dadurch bleiben die Inhalte dynamisch und können einfacher angepasst werden. Wenn man zum Beispiel eine klare Halbierung einer Fläche hat oder eine 3-2 Teilung, sollte man definitiv prozentuale Werte verwenden. Display flex bietet hierfür eine ideale Grundlage.

Feste Pixelwerte

Unter bestimmten Voraussetzungen kann, oder muss man feste Pixelwerte angeben. Es gibt jedoch sehr sehr wenige Ausnahmen hierzu. Beispiele sind

  • Icons
  • Logos
  • Navigationen
  • Abstände (Paddings)
  • Schriftgrößen
  • Zeilenabstände

Feste Verhältnisse

Wenn man feste Verhältnisse wie zum Beispiel 16:9 oder 21:9 haben möchte, hat zwei wege, es zu realisieren.

Viewport Width

Diese Methode ist meine Lieblingsmethode. Ich zeige euch erst einmal ein Beispiel für ein 16:9 Verhältnis und dann erkläre ich es genauer.

element{
	width: 100vw;
	height: calc(100vw / 16 * 9); 
} 

So. Das ist die Methode, die ich benutze, wenn zum Beispiel ein Element eingefügt werden muss, was genau dieses Verhältnis hat. Sagen wir mal wir wollen aus irgendeinem Grund ein div hinzufügen, welcher dieses Verhältnis beibehalten muss und inhalte haben muss. Dann benutzt man am besten diese Methode.

Man hat zudem auch noch die Möglichkeit, eine maximale Breite und eine maximale Höhe anzugeben. Dadurch kann man sein Container auf die wrapper Breite limitierten.

Es gibt noch die Methode mit einem padding, was ich als nächstes zeigen werde. Die padding Methode mit Position absolute in diesem Fall zu verwenden ist anfängerisch und falsch.

Padding top

Die padding top Variante baut einen padding top relativ zur Objektgröße ein. Je breiter das Objekt wird, erhöht sich automatisch auch. Diese Methode ist zu empfehlen, wenn man mehrere oder unbestimmte Anzahl an Elementen nebeneinander stehen hat und diese im selben Verhältnis vergrößern möchte. Ein Beispiel…

div{
	background: #dedede;
	padding-bottom: 56.25%; /* 16:9 */	
}

Der größte Nachteil bei dieser Geschichte ist, dass man keine volle Kontrolle über die Höhe und die Breite hat. Das bedeutet, dass man schnell ins schwanken kommen kann, wenn man dieses Element genauer kontrollieren möchte.

Ich benutze dieses Verfahren zum Beispiel in Shops, wenn Produktkacheln angezeigt werden und innerhalb dieser Kacheln Produktbilder angezeigt werden sollen. Wenn man dann die Kachelbreite kontrolliert, kontrolliert man automatisch auch die Produktbild Anzeige.

Themen

css HTML Islam-Archiv Responsiv Technik

Beitrag teilen

WhatsAppen

Folgen Sie uns