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

该模板看起来已经很老了，因为该行业已经通过了属性选择器并直接指向类定义。
即：.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特定代码。

广告系列监控器模板-

1 个答案: