Comment créer un compte à rebours réactif ?

Parce que les clients de messagerie ne prennent pas en charge le javascript, les compteurs à rebours sont des images gif animées, ce qui génère constamment un nouveau compte à rebours sur le serveur, créant ainsi toujours un nouveau gif et l'affichant au client. En soi, cette image a des dimensions claires - largeur et hauteur, donc l'animation gif sans manipulations supplémentaires avec le code html ne peut pas être réactive.

Pour rendre le compte à rebours réactif, vous devez avoir des connaissances techniques en balisage HTML et CSS, mais nous essaierons de décrire ce processus aussi simplement que possible afin que chacun puisse rendre son minuteur adaptatif.

Pour que le compte à rebours s'adapte automatiquement à la largeur de l'écran, vous devez connaître sa largeur (par exemple, la largeur du minuteur est de 500px), ajouter cette largeur à la propriété CSS max-width, obtenir max-width=500px (vous pouvez également remplacer 500px par 100%, mais alors si la largeur de l'e-mail est supérieure à la largeur du minuteur, le minuteur s'étirera plus que sa largeur, ce qui affectera la détérioration de la qualité de l'image).

Ensuite, ajoutez les propriétés suivantes width=100% et height=auto à cette propriété css, et combinez toutes ces propriétés séparées par des points-virgules, vous obtenez cette ligne max-width=500px; width=100%; height=auto; .

La dernière étape consiste à ajouter ce code au code du minuteur, pour cela nous devons ajouter une ligne de propriété à l'attribut "style", cela donne cette ligne - style="max-width=500px;width=100%;height=auto;" , puis ajoutez cette ligne au code du minuteur, le code complet devrait ressembler à ceci:

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

Après ces manipulations, votre minuteur devient réactif et vous pouvez vous attendre à ce qu'il s'affiche parfaitement sur n'importe quel appareil.

Pour simplifier ce processus, nous avons ajouté un bouton, en cliquant dessus, ces styles sont automatiquement ajoutés au code de votre minuteur, mais il est à noter que nous ajoutons une largeur non pas de 100% mais de 90%, ceci est fait pour que le compte à rebours à une petite largeur ait des retraits par rapport aux bords de la lettre, mais si vous le souhaitez, vous pouvez remplacer cette propriété vous-même par toute autre valeur.