活动监视器模板 -

Question

当尝试使用 Campaign Monitor 创建模板时，他们提供了 starting template。但是代码糟糕！我已经弄明白了大部分，- 但我无法弄清楚这些类背后的想法是什么：

@media only screen and (max-device-width: 480px) {
    table[class=w0], td[class=w0] {
        width: 0 !important;
    }

    table[class=w10], td[class=w10], img[class=w10] {
        width: 10px !important;
    }

    table[class=w15], td[class=w15], img[class=w15] {
        width: 5px !important;
    }

    table[class=w30], td[class=w30], img[class=w30] {
        width: 10px !important;
    }

    table[class=w60], td[class=w60], img[class=w60] {
        width: 10px !important;
    }

    table[class=w125], td[class=w125], img[class=w125] {
        width: 80px !important;
    }

    table[class=w130], td[class=w130], img[class=w130] {
        width: 55px !important;
    }

    table[class=w140], td[class=w140], img[class=w140] {
        width: 90px !important;
    }

    table[class=w160], td[class=w160], img[class=w160] {
        width: 180px !important;
    }

    table[class=w170], td[class=w170], img[class=w170] {
        width: 100px !important;
    }

    table[class=w180], td[class=w180], img[class=w180] {
        width: 80px !important;
    }

    table[class=w195], td[class=w195], img[class=w195] {
        width: 80px !important;
    }

    table[class=w220], td[class=w220], img[class=w220] {
        width: 80px !important;
    }

    table[class=w240], td[class=w240], img[class=w240] {
        width: 180px !important;
    }

    table[class=w255], td[class=w255], img[class=w255] {
        width: 185px !important;
    }

    table[class=w275], td[class=w275], img[class=w275] {
        width: 135px !important;
    }

    table[class=w280], td[class=w280], img[class=w280] {
        width: 135px !important;
    }

    table[class=w300], td[class=w300], img[class=w300] {
        width: 140px !important;
    }

    table[class=w325], td[class=w325], img[class=w325] {
        width: 95px !important;
    }

    table[class=w360], td[class=w360], img[class=w360] {
        width: 140px !important;
    }

    table[class=w410], td[class=w410], img[class=w410] {
        width: 180px !important;
    }

    table[class=w470], td[class=w470], img[class=w470] {
        width: 200px !important;
    }

    table[class=w580], td[class=w580], img[class=w580] {
        width: 280px !important;
    }

    table[class=w640], td[class=w640], img[class=w640] {
        width: 300px !important;
    }

    table[class=hide], td[class=hide], img[class=hide], p[class=hide], span[class=hide], .hide {
        display: none !important;
    }

    table[class=h0], td[class=h0] {
        height: 0 !important;
    }

    p[class=footer-content-left] {
        text-align: center !important;
    }

    #headline p {
        font-size: 30px !important;
    }
}

这是一个如何使用它的例子：

<layout label="Image and text">
  <table class="w580 section__container tema__container" width="580" cellpadding="0" cellspacing="0" border="0">
    <tbody>
    <tr>
      <td class="w580" width="580">
        <img editable="true" label="Image" class="w580" width="580" border="0">
      </td>
    </tr>
    <tr>
      <td class="w580" width="580">
        <p align="left" class="article-title">
          <singleline label="Title">Add a title</singleline>
        </p>
      </td>
    </tr>
    <tr>
      <td class="w580" width="580">
        <div align="left" class="article-content">
          <multiline label="Description">Enter your description</multiline>
        </div>
      </td>
    </tr>
    </tbody>
  </table>
</layout>

那些类只在代码的 (max-device-width: 480px) 部分提到，没有其他地方提到。是因为这些样式在桌面设备上是多余的吗？

这对我来说很有意义：

table[class=w10], td[class=w10], img[class=w10] {
        width: 10px !important;
    }

但是我看不出这个命名的逻辑：

table[class=w125], td[class=w125], img[class=w125] {
        width: 80px !important;
    }

Answer 1

该模板看起来很旧，因为行业已经移动了通过的属性选择器并直接 class 定义。
即：.classname {} 而不是 table[class=classname] {}

我会认真考虑使用其中一种资源，因为这些资源经常由业内投入大量资金并发声的人维护：

https://tedgoas.github.io/Cerberus/ - 很棒的入门模板，包含您的一般内容类型。
https://github.com/leemunroe/responsive-html-email-template - 同上，同样好。
https://templates.mailchimp.com/ - 整体电子邮件的良好资源，而不仅仅是代码。
https://litmus.com/community/snippets - 非常适合较小的片段，例如背景图片或 Outlook 特定代码。

活动监视器模板 -

Campaign Monitor Template -

html

css

email

newsletter