Contenido del curso
Media Queries para Diseño Responsive en Email Marketing
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.
Anthony Manuel Vargas Ruiz
Estudiante
Diego Forero
Team Platzi
Alberto Velasco Rivera
Estudiante
Roger Carlos Ariel Alba
Estudiante
Franklin Lucero
Estudiante
Andrés Vega
Estudiante
Libian María Hernández Gil
Estudiante
José Pablo Jiménez Cucanán
Estudiante
Nestor Mauricio Rojas Rozo
EstudianteAnthony Manuel Vargas Ruiz
EstudianteDiego Forero
Team Platzi
Martha Muñoz
Estudiante
Juan Carlos Wilches Niño
EstudianteQuizás faltó un poco más de introducción a lo que son las media queries, para qué sirven y cosas básicas. Siempre se puede buscar por cuenta propia pero entorpece la secuencia que se lleva en el curso
Hola tenemos un curso enfocado solo a responsive design y una clase enfocada a los media queries la encuentras aquí https://platzi.com/clases/1362-responsive-design/13540-media-queries4807/ para que profundices tu conocimiento.
de hecho para este curso te mencionaron que debes saber algo de maquetado, puedes checar los diversos cursos que tiene platzi amigo
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.
He estado considerando que en lugar de realizar media querys por resolucion, ¿no seria mas practico manejarlo por orientacion?
Podrías explicarme un poco mas de como lo harías?
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
El !important es importante. Baia Baia xD
¿Los media queries siempre tienen que estar en la etiqueta style sin importar si es un newsletter o email promocional?
Hola, 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.
@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.
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?
