¿Cómo crear un temporizador de cuenta regresiva adaptable?

Debido a que los clientes de correo electrónico no son compatibles con javascript, los temporizadores de cuenta regresiva son imágenes gif animadas, que generan constantemente una nueva cuenta regresiva en el servidor, creando así siempre un nuevo gif y mostrándolo al cliente. Por sí misma, esta imagen tiene dimensiones claras: ancho y alto, por lo que la animación gif sin manipulaciones adicionales con el código html no puede ser adaptable.

Para que el temporizador de cuenta regresiva sea adaptable, necesita tener conocimientos técnicos de marcado HTML y CSS, pero intentaremos describir este proceso de la manera más sencilla posible para que cualquiera pueda hacer su temporizador adaptable.

Para que el temporizador de cuenta regresiva se ajuste automáticamente al ancho de la pantalla, debe conocer su ancho (por ejemplo, el ancho del temporizador es de 500px), agregue este ancho a la propiedad CSS max-width, obtenga max-width=500px (también puede reemplazar 500px con 100%, pero luego, si el ancho del correo electrónico es mayor que el ancho del temporizador, el temporizador se estirará más allá de su ancho, lo que afectará el deterioro de la calidad de la imagen).

A continuación, agregue las siguientes propiedades width=100% y height=auto a esta propiedad css, y combine todas estas propiedades separadas por puntos y comas, obtendrá esta línea max-width=500px; width=100%; height=auto; .

El último paso es agregar este código al código del temporizador, para esto necesitamos agregar una línea de propiedad al atributo "style", resulta esta línea - style="max-width=500px;width=100%;height=auto;" , luego agregue esta línea al código del temporizador, el código completo debería verse así:

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

Después de estas manipulaciones, su temporizador se vuelve adaptable y puede esperar que se vea genial en cualquier dispositivo.

Para simplificar este proceso, hemos agregado un botón, al hacer clic en el cual estos estilos se agregan automáticamente al código de su temporizador, pero vale la pena señalar que agregamos un ancho no del 100% sino del 90%, esto se hace para que el temporizador de cuenta regresiva con un ancho pequeño tenga sangrías de los bordes de la letra, pero si lo desea, puede reemplazar esta propiedad usted mismo con cualquier otro valor.