0
我的電子郵件在任何其他計算機或移動顯示中都可以正常使用，但Gmail應用程序和筆記本電腦中的Gmail除外。 2個問題：電子郵件編碼：Gmail和Gmail應用程序似乎忽略了我的CSS
我加在CSS一個@media代碼，以使圖像上的移動（寬度：100％）觀察時爲響應，但Gmail應用（在三星電話和蘋果測試的兩種電話）似乎無視它。所以我的圖像顯得較小，固定寬度爲大屏幕指定。 這裏是結果：http://screencast.com/t/nm3jyc47K。預期的結果是讓圖像充滿100％的表格（如果我們排除隔離物，幾乎所有的屏幕），並且顯然居中。
在Gmail筆記本電腦網站上，表格之間的間隔符似乎被忽略，因此內聯元素相互接觸。結果如下：http://screencast.com/t/3D7H0Fqly。預期的結果是中間有一個24像素的間隔。 （PD：別爲我擔心的大小，我做了一些測試，在桌面上的大小以適當的）
這裏是圖片，3張圖片和2個間隔之間的HTML代碼。
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-170" style="max-width:100%;">
<tbody>
<tr>
<td align="center">
<a href="img-1.png" style="border:none; display:block;height:136px" width="170px" /></a>
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="24"><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-24" style="max-width:24px;">
<tbody>
<tr>
<td height="1" style="font-size:1px;line-height:1px"> </td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="170" valign="top"><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-170" style="max-width:100%;">
<tbody>
<tr>
<td align="center">
<a href="img-2.png" style="border:none; display:block;height:136px" width="170px" /></a>
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="24"><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-24" style="max-width:24px;">
<tbody>
<tr>
<td height="1" style="font-size:1px;line-height:1px"> </td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="170" valign="top"><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-width w-170" style="max-width:100%;">
<tbody>
<tr>
<td align="center">
<a href="img-3.png" style="border:none; display:block;height:136px" width="170px" /></a>
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</tbody>
</table>
而且現在的CSS代碼，在電子郵件的頭部：
<style type="text/css">
body{width:100% !important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin:0;padding:0;background-color:#ffffff}
* {-webkit-font-smoothing:antialiased}
.ExternalClass * {line-height:100%}
table td {border-collapse:collapse}
.wlf {width:600px}
.w-420 {width:420px}
.w-170 {width:170px}
.w-120 {width:120px}
.w-24 {width:24px}
.w-15 {width:15px}
@media only screen and (max-width:590px) {
.full-width {width:100% !important}
.m-width {width:100% !important;max-width:100% !important;float:none !important}
.m-block {display:block}
.m-none {display:none}
.m-img-ft {width:100% !important;height:auto !important;max-width:250px !important}
div {box-sizing:border-box !important}
}
</style>
再次，我沒有任何問題與所有其他電子郵件程序。任何想法可能是錯誤的，以解決這兩個問題？ （如果沒有其他的損害顯示器？）
感謝
好吧，我明白，這解釋了一切。所以根據你的回答，我設法解決了問題n°2的問題，在我的spacers中添加了一個內聯css：width：24px ;.這使得gmail可以閱讀並正確應用它們。除了移動Gmail應用程序外，這個電子郵件現在無處不在。 但是在這裏，我沒有任何線索知道如何去做，因爲它帶有媒體查詢：僅@media屏幕和（max-width：590px）。而這個我相信在地球上沒有辦法使用它。我需要的表格是： –
我需要的表格是： 寬度：100％！重要; max-width：100％！important; float：none！important 而且圖像是： 寬度：100％！重要; 身高：自動！重要; max-width：250px！important 電子郵件程序員通常如何將它應用於gmail移動應用程序？ –
我編輯了我的答案，包括獲得Fluid Responsive模板的地方。這確實是Gmail應用程序中獲取響應電子郵件的唯一解決方案，它仍將繼續適用於大多數桌面客戶端。 – Gortonington