Follow us

Responsive: Prozentuale Elementbreite ausrechnen

Um statische Layouts für ein Responsive Design vorzubereiten, müssen alle Pixelwerte in Prozentwerte umgerechnet werden. Das führt dazu, dass das Design sich allen Viewports optimal anpasst.

Mit folgender Formel lassen sich die Werte schnell umrechnen. Dabei ist darauf zu achten, ausreichend viele Nachkommastellen im CSS-Code anzugeben um ein sauberes Ergebnis zu erhalten.

Die Formel
Inneres Element in Pixeln / Eltern-Element in Pixeln x 100 = Wert in Prozent
(z.B.: 960 / 1440 * 100 = 66.67%)

Nachfolgend haben wir genau für diese Rechenoperation ein entsprechendes Formular erstellt:

:
x 100
Ergebnis