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.
Roger Carlos Ariel Alba
Lo recomendable es escribir los estilos en línea. Pero en el casod e los Media Queries se hace en la etiqueta "style" del head. Las medidas "promedio" son: 320px a 480px 640px a 768px Según las estádisticas podrás ajustar los media queries.
Franklin Lucero
He estado considerando que en lugar de realizar media querys por resolucion, ¿no seria mas practico manejarlo por orientacion?
Andrés Vega
Podrías explicarme un poco mas de como lo harías?
Libian María Hernández Gil
Hola, preferí implementar diseño movil first, dejando así los @media queries...
<style type="text/css"> @media screen and (min-width: 640px) { .two-col { max-width: 48%; height: max-content; vertical-align: center; display: inline-block; } } @media (min-width: 860px) { .three-col { max-width: 33%; height: max-content; vertical-align: center; display: inline-block; } } </style>
Comparto el código en mi Repo
José Pablo Jiménez Cucanán
El !important es importante. Baia Baia xD
Nestor Mauricio Rojas Rozo
Anthony Manuel Vargas Ruiz
¿Los media queries siempre tienen que estar en la etiqueta style sin importar si es un newsletter o email promocional?
Diego Forero
Team PlatziHola, si deben estar hay, existen muchas restricciones de los diferentes clientes de correo, por eso es mejor que estén siempre dentro de esa etiqueta y no por fuera, ademas esto te ayuda a reutilizar clases que están dentro de esta etiquetas.
Martha Muñoz
@ansonyv hola! Recuerda que newsletter y email promocional son tipos de email, y ambos los puedes construir en la técnica Escalable o Responsive. Los media queries son los únicos estilos que deben ir en la etiqueta <style> y solo se usan para la técnica de desarrollo responsive.
Juan Carlos Wilches Niño
bueno esto esta chevere para responsibe, pero si lo quiero adaptativo? como podria hacer si yo quisiera que las tres columnas en mobile quedaran en en una sola columna?
