2015-01-13 102 views
0

我試圖使用HTML和CSS它可以通過300像素寬或600px的寬視以下@media建立一個相當簡單的電子郵件調整大小:表堆疊和HTML和CSS

@media only screen and (max-width: 599px) { /* Mobiles etc */ } 
@media only screen and (min-width: 600px) { /* Tablets or Desktops etc */ } 

然後我有一張有兩個表格的表格,只要我將瀏覽器的大小調整到小於600px,這就好了。我已經做到了這一點:

@media only screen and (max-width: 599px) { 
    .floatLeftResponse{ 
    width:100% !important; 
    float:left; 
    } 

不過,我似乎無法得到的一切工作正常,因爲我的整個電子郵件要麼由一個表600px的寬或同與內兩份50%的表。在某些情況下,我希望右側位於左側,反之亦然。

然後我們有600px寬的圖像,它也應該縮小到300px寬。

由於我對這一切都相當陌生,所以我一直在做大量的谷歌搜索,每當我得到一個部分的工作,我總是設法打破其他部分。任何幫助,將不勝感激你們:)

+1

僅供參考,很多電子郵件客戶端[不支持媒體查詢](https://litmus.com/help/email-clients/media-query-support/) – biggles

+0

@jlego,我應該如何使用我的電子郵件「響應」? – hshah

+0

只要您知道它們不像在Web瀏覽器中那樣支持跨客戶端,您就可以利用支持它的媒體查詢。 Litmus,Campaign Monitor和MailChimp都有關於此的最佳實踐的文章和資源。 – biggles

回答

1

管理人根據我所知道的,而不是使用在線指南從頭開始構建整個電子郵件弄明白: http://jsfiddle.net/hirenshah/k7wg3yry/4/

<body bgcolor="#C0C0C0"> 
<table class="container"> 
    <tr> 
     <td> 
      <!-- Header Table Start --> 
      <table dir="rtl" width="100%"> 
       <tr> 
        <td width="35%" dir="ltr" class="table">RIGHT HAND SIDE LOGO</td> 
        <td width="65%" dir="ltr" class="table">Quote Number: 1234567890</td> 
       </tr> 
      </table> 
      <!-- Header Table End --> 
      <!-- Image Banner Table Start --> 
      <table class="center"> 
       <tr> 
        <td> 
         <img src="http://effervescence.me/wp-content/uploads/2014/01/UnencumberedSharingCircleBanner600px.jpg" class="resize" /> 
        </td> 
       </tr> 
      </table> 
      <!-- Image Banner Table End --> 
      <!-- Intro Text Start --> 
      <table> 
       <tr> 
        <td>Dear Mr Smith, 
         <br>We are a recognized leader in enterprise engagement and customer experience management and today are proud to count some of the world's largest brands as our customers. 
         <br> 
         <br>The inspiration for our company name is the Thunderhead cloud - a type of storm cloud that signals disruption and turbulence. It's symbolic of the change we bring to enterprise software; a cloud based solution provider leading from the front to revolutionize customer engagement and design-led ease of use. 
         <br> 
         <br>Since launching in 2004, we have become an acknowledged leader in our market, with operations in three continents, and a client base that includes some of the best known companies in the financial services and investment banking world. 
         <br> 
         <br>We help our customers succeed by providing them with innovative technology solutions that enable them to more effectively communicate, collaborate and engage with their customers, employees and partners. 
          </td> 
       </tr> 
      </table> 
      <!-- Intro Text End --> 
      <!-- Header Table Start --> 
      <table width="100%"> 
       <tr> 
        <td width="50%" class="table"> 
         <p>You have bought stuff</p> 
        </td> 
        <td width="50%" class="table"> 
         <p>But you can also buy this stuff</p> 
        </td> 
       </tr> 
      </table> 
      <!-- Header Table End --> 
     </td> 
    </tr> 
</table> 

    /* Mobile Devices */ 
@media only screen and (max-width: 599px) { 
    .table { 
     display:block; 
     width:100%; 
    } 
    .container { 
     width:300px; 
     !important max-width:300px; 
     !important 
    } 
    img.resize { 
     max-width:300px; 
     height:auto; 
    } 
} 
/* All Other Devices */ 
.container { 
    background-color: white; 
    margin-left: auto; 
    margin-right: auto; 
    max-width:600px; 
    padding:10px; 
    border-radius: 20px 20px 20px 0px; 
} 
.center { 
    margin-left: auto; 
    margin-right: auto; 
} 
.left { 
    text-align: left; 
} 
.right { 
    text-align: right; 
}