用于电子邮件格式的媒体查询不起作用

时间:2019-04-21 15:52:39

标签: css media-queries html-email

我似乎无法使媒体查询正常工作-至少对于一种需要使用的相关样式-padding类的table-wrapper。内联填充总是赢。

  1. 我相信我需要为媒体查询设置!important,所以我确实有。

  2. 媒体查询位于html的顶部

  3. 这位于html的顶部-<meta name="viewport" content="width=device-width">

  4. 其余样式是内联的/由应用程序完成。

有人知道我可能会缺少什么吗?

https://codepen.io/lg00/pen/LvrXVY

<html xmlns="http://www.w3.org/1999/xhtml">

<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html;  charset=UTF-8">
<meta charset="UTF-8">
<title></title>

<style>
/* Responsive */
@media screen and (max-width: 700px) {
  .table-wrapper {
    width: 100% !important; 
    margin-top: 0px !important; 
    border-radius: 0px !important; 
    padding: 5px 15px !important; 
  }

  .header {
    border-radius: 0px !important; 
  }

  .header-title {
    padding-left: 20px !important; 
    padding-right: 20px !important; 
  }

  .header-title h1 {
    font-size: 25px !important; 
  }

}
</style>

<div class="email-wrapper" style="background-color:#F5F6F7">
  <table width="100%" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td>
          <!-- PADDING SET HERE -->
          <table cellpadding="0" cellspacing="0" class="table-wrapper" style="margin:auto; margin-top:50px; background-color:#fff; padding:64px 100px">
            <tbody>
              <tr>
                <td class="container header" style="background-repeat:no-repeat; border-top-left-radius:6px; border-top-right-radius:6px; text-align:center; color:#000; padding-bottom:32px; display:block !important; margin:0 auto !important; clear:both !important">

                    <div class="header-title" style="font-weight:bold">Test</div>
                </td>
              </tr>

              <tr>
                <td class="content" style="border-bottom-left-radius:6px; border-bottom-right-radius:6px; margin:0 auto !important; clear:both !important">

                  <div class="header-title" style="color:#000; text-align:center">
                    <h1 style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif; margin-bottom:15px; color:#47505E; margin:0px 0 10px; line-height:1.2; font-weight:200; line-height:45px; font-weight:bold; margin-bottom:30px; font-size:28px; line-height:40px; margin-bottom:32px; font-weight:400; color:#000; padding-top:0px">Test The Length of the Title - Will it Wrap</h1>
                  </div>

                    <table width="100%" cellpadding="0" cellspacing="0">
                      <tbody>
                        <tr>
                        <td class="text-center" style="text-align:center">
                          <a href="test" class="btn-primary" style="color:#5633FF; word-wrap:break-word; font-family:Helvetica Neue, Helvetica, Arial, sans-serif; text-decoration:none; background-color:#5633FF; line-height:2; max-width:100%; font-size:14px; padding:8px 40px 8px 40px; margin-bottom:40px; font-weight:600; cursor:pointer; display:inline-block; border-radius:30px; margin-left:auto; margin-right:auto; text-align:center; color:#FFF !important">Test</a>
                        </td>
                      </tr>
                    </tbody>
                  </table>

                  <table class="data-table bordered" width="100%" cellpadding="0" cellspacing="0" style="padding-top:32px; padding-bottom:32px; border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB">
                    <tbody>
                      <tr>
                        <td class="data-table-title" style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; font-weight:bold; font-size:20px; padding-top:0px">Test</td>
                      </tr>

                      <tr>
                        <td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px">Test</td>
                        <td class="text-right" style="text-align:right; letter-spacing:0.6px; padding-top:5px; padding-bottom:5px">Test</td>
                      </tr>

                      <tr class="bordered" style="border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB">
                        <td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; border-top:1px solid #DBDBDB">Test</td>
                        <td class="text-right" style="text-align:right; letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; border-top:1px solid #DBDBDB">test</td>
                      </tr>

                    </tbody>
                  </table>

                  <table class="data-table" width="100%" cellpadding="0" cellspacing="0" style="padding-top:32px; padding-bottom:32px">
                    <tbody>
                      <tr>
                        <td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; vertical-align: top; ">
                          <p style="margin-top: 0px; ">
                              <span class="bold" style="font-weight:bold">Test</span><br>
                              test<br>
                          </p>
                        </td>
                        <td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; width: 20%"></td>
                        <td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; vertical-align: top; ">
                          <p style="margin-top: 0px; ">
                            <span class="bold" style="font-weight:bold">Test2</span><br>
                          </p>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="footer" style="width:100%; text-align:center; clear:both !important">
            <p class="text-center" style="text-align:center; font-size:12px; color:#666">Test</p>
          </div>
          <br>
        </td>
      </tr>
    </tbody>
  </table>
</div>

3 个答案:

答案 0 :(得分:2)

这是媒体查询中的特异性问题。将.header-title移到.table-wrapper上方,因为填充会覆盖.table-wrapper中设置的内容

 .header-title {
    padding-left: 20px !important; 
    padding-right: 20px !important; 
  }

  .table-wrapper {
    width: 100% !important; 
    margin-top: 0px !important; 
    border-radius: 0px !important; 
    padding: 5px 15px !important; 
  }

  .header {
    border-radius: 0px !important; 
  }

答案 1 :(得分:1)

将您的CSS更改为此,希望它能起作用。

<style>
//Default styling
  .table-wrapper {
    width: 50%; 
    margin-top: 0px; 
    border-radius: 0px; 
    padding: 5px 15px; 
  }
/* Responsive */    
@media screen and (max-width: 700px) {
  .table-wrapper {
    width: 100%; 
    margin-top: 0px; 
    border-radius: 0px; 
    padding: 5px 15px; 
  }

  .header {
    border-radius: 0px; 
  }

  .header-title {
    padding-left: 20px; 
    padding-right: 20px; 
  }

  .header-title h1 {
    font-size: 25px; 
  }

}
</style>

答案 2 :(得分:1)

请检查CSS的特殊性,因为您说的是内嵌样式是最具体的选择器,“胜出”。

CSS特异性:

  1. 内联样式
  2. ID,类别
  3. 伪类,归因
  4. 元素,伪元素
相关问题