Media Queries para Diseño Responsive en Email Marketing
Contenido del curso
Anthony Manuel Vargas Ruiz
Diego Forero
Team Platzi
Alberto Velasco Rivera
Roger Carlos Ariel Alba
Franklin Lucero
Andrés Vega
Libian María Hernández Gil
José Pablo Jiménez Cucanán
Nestor Mauricio Rojas Rozo
Anthony Manuel Vargas Ruiz
Diego Forero
Team Platzi
Martha Muñoz
Juan Carlos Wilches Niño
Quizá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?
