I need to create a flexible email template. I did my research and found out that media queries are not widely supported by email clients.
So, I tried not to use the media query and stacked the columns with display: inline-block; max-width:290px;.
But what if I want to change the font size for the mobile version? I also have a case where a client wants several blocks to be visible on mobile devices, but not on the desktop. How can I achieve these results without a media query?
Also, in my case, when I add style rules and media queries, I believe that iOS supports media queries. But rues do not appear under media queries, but other rules defined in <style></style>work fine.
The template looks something like this:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
table {
font-size: 24px;
}
#tdtoshowinmobile {
display: none;
}
@media only screen and max-device-width(767px){
table {
font-size: 32px !important;
}
#tdtoshowinmobile {
display: block !important;
}
}
</style>
</head>
<body>
<table>
...tr...td....
</table>
</body>
, - . , , . , - , .
, :
font-size color .. -?
- ( style )