Wie erstelle ich einen responsiven Countdown-Timer?

Da E-Mail-Clients Javascript nicht unterstützen, sind Countdown-Timer animierte GIF-Bilder, die ständig einen neuen Countdown auf dem Server generieren und dadurch immer ein neues GIF erstellen und es dem Client anzeigen. An sich hat dieses Bild feste Abmessungen – Breite und Höhe, sodass eine GIF-Animation ohne zusätzliche Manipulationen am HTML-Code nicht responsiv sein kann.

Um den Countdown-Timer responsiv zu gestalten, benötigen Sie technisches Wissen über HTML- und CSS-Markup, aber wir werden versuchen, diesen Vorgang so einfach wie möglich zu beschreiben, damit jeder seinen Timer adaptiv gestalten kann.

Damit sich der Countdown-Timer automatisch an die Bildschirmbreite anpasst, müssen Sie seine Breite kennen (zum Beispiel beträgt die Timer-Breite 500px), diese Breite zur CSS-Eigenschaft max-width hinzufügen und erhalten max-width=500px (Sie können 500px auch durch 100% ersetzen, aber dann dehnt sich der Timer, wenn die Breite der E-Mail größer als die Breite des Timers ist, über seine Breite hinaus aus, was sich auf die Verschlechterung der Bildqualität auswirkt).

Fügen Sie als Nächstes die Eigenschaften width=100% und height=auto zu dieser CSS-Eigenschaft hinzu und fassen Sie alle diese durch Semikolons getrennten Eigenschaften zusammen. Sie erhalten diese Zeile: max-width=500px; width=100%; height=auto;.

Der letzte Schritt besteht darin, diesen Code zum Timer-Code hinzuzufügen. Dazu müssen wir eine Eigenschaftszeile zum Attribut "style" hinzufügen. Es ergibt sich diese Zeile: style="max-width=500px;width=100%;height=auto;" , fügen Sie diese Zeile dann zum Timer-Code hinzu. Der vollständige Code sollte wie folgt aussehen:

<img src="https://m.promofeatures.com/aya" border="0" alt="https://promofeatures.com" style="max-width=500px;width=100%;height=auto;" />

Nach diesen Manipulationen wird Ihr Timer responsiv und Sie können erwarten, dass er auf jedem Gerät großartig aussieht.

Um diesen Vorgang zu vereinfachen, haben wir eine Schaltfläche hinzugefügt, durch deren Klicken diese Stile automatisch zum Code Ihres Timers hinzugefügt werden. Es ist jedoch anzumerken, dass wir Breite nicht mit 100%, sondern mit 90% hinzufügen. Dies geschieht, damit der Countdown-Timer bei geringer Breite Einzüge von den Rändern des Briefes hat. Wenn Sie möchten, können Sie diese Eigenschaft jedoch selbst durch einen beliebigen anderen Wert ersetzen.