使用媒体查询缩放类型

时间:2014-06-04 14:30:10

标签: responsive-design html-email

有人可以告诉我为什么这不会缩放类名为"标题"? 我可能错过了一些重要元素,但我无法看到它是什么!

谢谢!

吉姆

  @media  only screen and (max-width: 480px) 

       {
    /* iPhone only  (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) - only screen and (max-width: 480px)
    (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)*/

        body,table,td,p,a,li,blockquote {
          -webkit-text-size-adjust:none !important;
        }
        table {width: 100% !important;}

        .responsive-image
        img {
          height: auto; line-height: 100% !important;
          max-width: 100% !important;
          width: 100% !important;
        }
        .heading
        { font-size: 10px !important;
        }
       }

    </style>
  </head>
  <body>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td>
          <table border="0" cellpadding="0" cellspacing="0" align="center" width="600" bgcolor="#FFFFFF">
            <tr>
        <td width="600"><table width="600" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td style="padding: 0 0px;" align="center" class="responsive-image" width="307" height="auto"><img src="http://contact.friendslife.co.uk/ukassets/images/482/Responsive_test/fpi_test_top_sky.jpg" width="100%" alt="" ></td>

            <td width="266" bgcolor="#ED4134" style="font-family:Arial; font-weight:300; font-size:15px; color:#FFFFFF; padding:0px; text-align:right; class="heading">Newsletter June</td>

1 个答案:

答案 0 :(得分:1)

你错过了td的引用;)

<td width="266" bgcolor="#ED4134" style="font-family:Arial; font-weight:300; font-size:15px; color:#FFFFFF; padding:0px; text-align:right;" class="heading">Newsletter June</td>