Media Queries para Diseño Responsive en Email Marketing

Clase 28 de 36Curso de Diseño y Maquetación para Emails

Resumen

Vamos a crear una etiqueta <style type="text/css"> para añadir los estilos de nuestra plantilla responsive.

Recuerda que debes utilizar estilos en línea siempre que puedas, solo usamos los media queries cuando necesitamos estilos dinámicos que cambian con el tamaño de los dispositivos de los usuarios.

Vamos a definir un media query para cada dispositivo. En móviles las medidas generales son entre 320 y 480px, en tablets empieza con 640 y termina en 768px mientras que, en desktop, no necesitamos media queries porque los estilos por defecto van a ser suficientes.

También es una buena práctica añadir !important al final de cada estilo para evitar problemas y asegurarnos que los estilos se van a cumplir en cualquier condición o cliente de correo electrónico.