Como fazer a tabela HTML responsiva para o modelo de E-mail ao usar um arquivo CSS externo não é uma possibilidade
criei um modelo de E-mail que usa uma disposição de duas colunas. Esta era a minha abordagem:
<table>
<tr>
<td colspan="2" align="center">
<h1>Header of my email template</h1>
</td>
</tr>
<tr>
<td>
<img src="image1.jpg" alt="Image 1" />
</td>
<td>
<img src="image2.jpg" alt="Image 2" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<p>Footer of my email template</p>
</td>
</tr>
</table>
funciona muito bem na área de trabalho! Tenho um layout de duas colunas exactamente como eu queria. O problema está nos telefones porque os telões são muito pequenos para um layout de duas colunas. Preciso de uma imagem por linha, não Duas, para dispositivos móveis. O que eu poderia fazer era usar float:left;width:100% para os elementos <td> que contêm as imagens para que eu tenha a disposição de uma coluna que eu preciso. No entanto, isso float:left;width:100% deve aplicar-se apenas quando @media screen and (max-width:450px), por exemplo. Mas não há maneira de usar @media screen and (max-width:450px) usando css inline. Lembre-se, isto é para um modelo de E-mail. Por isso, não posso invocar ficheiros CSS externos ou adicionar CSS ao <head> da página porque este é um código que será enviado para um modelo de E-mail.
Alguma ideia? Obrigar você.Coisas A Fazer
usar tabelas para a disposição. As tabelas são mais consistentemente suportadas. O recomendo que coloque o seu código CSS em linha com o seu conteúdo. Ele deve ser parecido com isto: o seu conteúdo aqui.... Declarar a largura, o 'cellpadding' e o 'cellspacing' para todos mesas e células de mesa. Isso resultará em uma largura fixa para o modelo. Usar os atributos de marcas do hspace e do vspace para adicionar espaços em branco em torno de uma imagem. Os estilos de margem e estofamento em linha são suportados por a maioria, mas não todos os clientes de E-mail
2 answers
O Google oferece suporte CSS: https://developers.google.com/gmail/design/css como A. Meshu salientou nos seus comentários à minha pergunta.
Isso fez-me pensar que tinha de enviar um documento completo<HTML>, por isso incluí <html><head><style type="text/css">..........</style></head><body>...........</body></html>.
Para os meus outros modelos de E-mail, apenas Envio O código para o <body>. Eu começo o modelo com um <div> e tudo funciona. Mas para este modelo agora estou usando esta estrutura:
<html>
<head>
<style type="text/css">
@media screen and (max-width:450px) {
.responsive {
float:left!important;
width:100%!important
}
}
</style>
</head>
<body>
..........
</body>
</html>
Uma vez que table os elementos são ao nível do bloco, eu diria para mudar aqueles td em aninhados tablecomo se fosse 1999, e depois {[4] } o primeiro que restasse:
<table>
<tr>
<td colspan="2" align="center">
<h1>Header of my email template</h1>
</td>
</tr>
<tr>
<td>
<table style="float:left;">
<tr>
<td>
<img src="image1.jpg" alt="Image 1" />
</td>
</tr>
</table>
<table>
<tr>
<td>
<img src="image2.jpg" alt="Image 2" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<p>Footer of my email template</p>
</td>
</tr>
</table>