16

この素晴らしい記事では、モバイルブラウザに合わせて拡張できるレスポンシブテーブルを作成する方法について説明します。

今、私は同じテクニックをhtmlメールに適用しようとしていますが、htmlメールdisplay:blockでは機能しないようです。

問題を再現するには：

  1. 次のコードをHTMLページとして保存します。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        @media only screen and (max-width: 760px), screen and (max-device-width: 480px)  {
            /* Force table to not be like tables anymore */
            table, td, tbody, tr{
                    display: block;
                    width:100%;
                    padding:0;
                    clear:both;
            }
            td {
                    /* Behave  like a "row" */
                    position: relative !important;
            }
        }
    </style>
</head>
<body>
    <table style="width:100%;">
        <tr>
            <td style="border:1px solid red;">1/1</td>
            <td style="border:1px solid red;">1/2</td>
            <td style="border:1px solid red;">1/3</td>
        </tr>
        <tr>
            <td style="border:1px solid red;">2/1</td>
            <td style="border:1px solid red;">2/2</td>
            <td style="border:1px solid red;">2/3</td>
        </tr>
    </table>
</body>
</html>

  2. Safariでページを開く

  3. ウィンドウのサイズを変更して、ウィンドウサイズを小さくするとテーブルがどのように変化するかを確認します

  4. CMD+iまたはこのページのコンテンツを押しFile->MailてHTMLメールを作成します

  5. メールウィンドウのサイズを変更して、テーブルのサイズが正しく変更されていることを確認します

  6. 自分宛にメールを送信して開きます。

  7. ここで、電子メールが実際にメディアクエリに応答するが、テーブルのスタイルを変更できなかったことに注目してください。

実際にテーブルを正しく表示するメールクライアントをまだ見つけていません。これは行き止まりですか、それとも回避策のアイデアがありますか？

4

6 に答える 6

16

受け入れられた答えはいくつかの素晴らしい情報を提供しますが、それは質問に直接対処していません。私は最近レスポンシブメールを試していて、他の人が役立つかもしれないいくつかの良い解決策を考え出しました。どうぞ...

質問に答えるために、display:block;一部のモバイルデバイス（Android、iOS、Kindle）でテーブルの列を行として動作させるために使用できます。

これは、モバイルデバイスで2列のレイアウトスタック（右の列の上に左の列）を作成する方法を示す例です。

HTML

<table class="deviceWidth" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
  <tr>
    <td width="50%" align="right" class="full">
      <p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
        <a href="#"><img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>  
      </p>                  
    </td>
    <td width="50%" align="left" class="full">
        <a href="#"><img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>                     
    </td>
  </tr>
</table>

CSS

@media only screen and (max-width: 640px)  {
    body[yahoo] .deviceWidth {width:440px!important; }  T 

    body[yahoo] .full {
        display:block;
        width:100%;
    }
}

注：body[yahoo]セレクターは、Yahooがメディアクエリをレンダリングするのを防ぎます。body私のメールの要素にはyahoo="fix"属性があります。

上記のCSSによると、画面の幅が640ピクセル未満の場合td、クラスが。のsfullは。display:blockwidth:100%

さて、少し凝ったものにしましょう。左側の列を右側の列の下にスタックしたい場合があります。これを行うdir="rtl"には、包含で使用しtableて列の順序を反転します。CSSは同じままです。新しいHTMLは次のとおりです。

HTML

<table class="deviceWidth" dir="rtl"  width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
  <tr>
    <td width="50%" dir="ltr" align="right" class="full">
      <p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
        <a href="#"><img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a> 
      </p>                  
    </td>
    <td width="50%" dir="ltr" align="left" class="full">
        <a href="#"><img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>                      
    </td>
  </tr>
</table>

追加するdir="rtl"ことで、列の順序を逆にするように指示しています。最初の列（HTMLのフロー内）が右側に表示され、2番目の列（HTML内）が左側に表示されています。640pxより小さい画面の場合、最初に最初の列（右側の列）が表示され、次に2番目の列（左側の列）が表示されます。

これが完全なHTMLとCSSであり、GmailとiOS5のスクリーンショットが添付されています。

Gmail iOS 5 Android 4

于 2013-08-31T06:10:35.887 に答える
2

私はそれを機能させることができました、これが結果です： https ://litmus.com/pub/d9ac198

これは、tdを行のように動作させるために使用するコードです。

table[class="magic"],
table[class="magic"] tbody,
table[class="magic"] tr,
table[class="magic"] td {
    display: block !important;
    width: 100%;
}
于 2013-02-21T20:14:34.523 に答える
2

これを参照することをお勧めします：http：//www.campaignmonitor.com/css/

あまり最新ではありませんが、電子メールのcssサポートという点では優れたリソースです。残念ながら、電子メールテンプレートを作成するときは、ブラウザだけでなく、Outlookやそれらが提供するcssサポートなどのさまざまなクライアントを考慮する必要があります。

その上、Gmailのようなメールプロバイダーはドキュメントの特定の部分（ヘッドタグなど）を削除する傾向があるため、基本的なサポートが非常に不十分なオーディエンス（電子メールクライアント）にレスポンシブデザインの概念を適用することは非常に困難になりますcss。

于 2012-06-01T14:03:05.840 に答える
1

もう1つのアプローチは、ここで説明するように、1つの電子メールで2つのデザインを操作することです。1つはデスクトップリーダー用、もう1つはモバイルリーダー用です。

于 2015-04-01T13:53:58.053 に答える
0

私はまったく同じ問題を抱えています！iOSデバイスのMailでのみ機能すると思いましたが、実際に送信するまでは、まさにあなたが言っているとおりに機能します。

@Luca、サポートは素晴らしいものではないことはわかっていますが、メディアクエリはほとんど無視されているため、最新の電子メールクライアントで電子メールの見栄えを少し良くしたい場合は、追加するのがいいでしょう。Outlookやその他のユーザーは、メディアクエリ/レスポンシブテーブルがなくても、「通常の」HTMLメールを受信します。

于 2012-11-07T16:28:13.830 に答える
0

メディアクエリを使用して、このようなモバイルデバイスのtd要素をスタックすることがわかりました

td[class="stack-content"] {display:block !important}

明らかにdisplay：blockプロパティをサポートしていないWindows Phone 7を除いて、ほとんどのデバイスで機能するようです。

于 2013-08-05T08:36:43.803 に答える