在响应式电子邮件设计中填充

时间：2013-03-14 12:49:55

标签： css responsive-design media-queries html-email

我似乎无法找到对我的查询的明确答案，特别是因为这对我来说都是一个新领域，发现它有点棘手，但我几乎在那里：）

我基本上是尝试在电子邮件顶部的社交图标中添加填充样式，以便在调整浏览器大小时（基本上在智能手机上查看），每个图标之间有足够的空间。

当屏幕处于全尺寸时，它具有相等的间距，因为它所在的列是松散定义的。如果屏幕在断点处减少，那么不必欺骗并使用一张图像，而是间距开始生效将会很棒。

代码如下：

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ZURBemails</title>
<link href="stylesheets/email2.css" rel="stylesheet" type="text/css" />
<style>
@charset "UTF-8";
/* CSS Document */

/* ------------------------------------- 
        GLOBAL 
------------------------------------- */
* { 
    margin:0;
    padding:0;
}
* { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }

img { 
    max-width: 100%; 
}
.collapse {
    margin:0;
    padding:0;
}
body {
    -webkit-font-smoothing:antialiased; 
    -webkit-text-size-adjust:none; 
    width: 100%!important; 
    height: 100%;
}


/* ------------------------------------- 
        ELEMENTS 
------------------------------------- */
a { color: #2BA6CB;}

.btn {
    text-decoration:none;
    color: #FFF;
    background-color: #666;
    padding:10px 16px;
    font-weight:bold;
    margin-right:10px;
    text-align:center;
    cursor:pointer;
    display: inline-block;
}

p.callout {
    padding:15px;
    background-color:#ECF8FF;
    margin-bottom: 15px;
}
.callout a {
    font-weight:bold;
    color: #2BA6CB;
}

p.subtext {
    padding:0 15px;
    margin-bottom: 15px;
}
.subtext a {
    font-weight:bold;
    color: #2BA6CB;
}

table.social {
/*  padding:15px; */
    background-color: #ebebeb;

}
.social .soc-btn {
    padding: 3px 7px;
    font-size:12px;
    margin-bottom:10px;
    text-decoration:none;
    color: #FFF;font-weight:bold;
    display:block;
    text-align:center;
}
a.fb { background-color: #3B5998!important; }
a.tw { background-color: #1daced!important; }
a.gp { background-color: #DB4A39!important; }
a.ms { background-color: #000!important; }

.body-wrap tr .container .content .nav {
    text-align: center; 
    color:#696969;
    margin-top:-10px;
    margin-bottom:5px;
    line-height:1.5;
}
.body-wrap tr .container .content .nav a {
    text-decoration:none;   
    color:#696969;
}


.sidebar .soc-btn { 
    display:block;
    width:100%;
}

p.topNote { border-top: 4px solid #1b3281; margin-top:-2px;}


/* ------------------------------------- 
        HEADER 
------------------------------------- */
table.head-wrap { width: 100%;}

.header.container table td.logo { padding: 15px; }
.header.container table td.label { padding: 15px; padding-left:0px;}


/* ------------------------------------- 
        BODY 
------------------------------------- */
table.body-wrap { width: 100%;}


/* ------------------------------------- 
        FOOTER 
------------------------------------- */
table.footer-wrap { width: 100%;    clear:both!important;
}
.footer-wrap .container td.content  p { border-top: 1px solid rgb(215,215,215); padding-top:15px;}
.footer-wrap .container td.content p {
    font-size:10px;
    font-weight: bold;

}


/* ------------------------------------- 
        TYPOGRAPHY 
------------------------------------- */
h1,h2,h3,h4,h5,h6 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }

h1 { font-weight:bold; font-size: 27px; color:#1b3180;}
h2 { font-weight:bold; font-size: 22px; color:#1b3180;}
h3 { font-weight:900; font-size: 22px; color:#0166b1;}
h4 { font-weight:500; font-size: 20px; color:#0166b1;}
h5 { font-weight:900; font-size: 17px;}
h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;}

.collapse { margin:0!important;}

p, ul { 
    margin-bottom: 10px; 
    font-weight: normal; 
    font-size:14px; 
    line-height:1.6;
}
p.lead { font-size:17px; }
p.last { margin-bottom:0px;}

ul li {
    margin-left:5px;
    list-style-position: inside;
}

/* ------------------------------------- 
        SIDEBAR 
------------------------------------- */
ul.sidebar {
    background:#ebebeb;
    display:block;
    list-style-type: none;
}
ul.sidebar li { display: block; margin:0;}
ul.sidebar li a {
    text-decoration:none;
    color: #666;
    padding:10px 16px;
/*  font-weight:bold; */
    margin-right:10px;
/*  text-align:center; */
    cursor:pointer;
    border-bottom: 1px solid #777777;
    border-top: 1px solid #FFFFFF;
    display:block;
    margin:0;
}
ul.sidebar li a.last { border-bottom-width:0px;}
ul.sidebar li a h1,ul.sidebar li a h2,ul.sidebar li a h3,ul.sidebar li a h4,ul.sidebar li a h5,ul.sidebar li a h6,ul.sidebar li a p { margin-bottom:0!important;}



/* --------------------------------------------------- 
        RESPONSIVENESS
        Nuke it from orbit. It's the only way to be sure. 
------------------------------------------------------ */

/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
    display:block!important;
    max-width:640px!important;
    margin:0 auto!important; /* makes it centered */
    clear:both!important;
}

/* This should also be a block element, so that it will fill 100% of the .container */
.content {
    padding:15px;
    max-width:600px;
    margin:0 auto;
    display:block; 
}

/* Let's make sure tables in the content area are 100% wide */
.content table { width: 100%; }


/* Odds and ends */
.column {
    width: 300px;
    float:left;
}
.column tr td { padding: 15px; }
.column-wrap { 
    padding:0!important; 
    margin:0 auto; 
    max-width:600px!important;
}
.column table { width:100%;}
.social .column {
    width: 280px;
    min-width: 279px;
    float:left;
}

/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear { display: block; clear: both; }

.double .column {
    width: 280px;
    min-width: 279px;
    float:left;
}

.socialicons { padding-left:3px; }


/* ------------------------------------------- 
        PHONE
        For clients that support media queries.
        Nothing fancy. 
-------------------------------------------- */
@media only screen and (max-width: 600px) {

    a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}

    div[class="column"] { width: auto!important; float:none!important;}

    table.social div[class="column"] {
        width:auto!important;
    }

    /* flex the hero image */
.container img {  width:100% !important; }


}




</style>
</head>

<body bgcolor="#ececec">

<!-- HEADER -->
<table class="head-wrap" bgcolor="#ffffff" width="100%">
    <tr>
        <td></td>
        <td class="header container">

                <div class="content">
                  <table bgcolor="#ffffff">
                    <tr>
                        <td height="42" style=" padding-right:10px;">
                        <img src="http://placehold.it/500x26"></td>
                        <td rowspan="4" align="right"><img src="http://www.google.co.uk/emails/Template2013/images/atol.jpg"/></td>
                    </tr>
                    <tr>
                      <td style="color: #CCCCCC;"><img src="http://placehold.it/265x20"></td>
                    </tr>
                    <tr>
                      <td style="color: #CCCCCC;">&nbsp;</td>
                    </tr>
                    <tr>
                      <td style="color: #CCCCCC;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                            <td width="31%">&nbsp;</td>
                            <td width="30%"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="right">
                              <tr>
                      <td style="color: #CCCCCC;">&nbsp;</td>
                    </tr>
                            </table></td>
                        </tr>
                      </table></td>
                    </tr>
                  </table>
                    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="socialicons">
                      <tr>
                        <td width="51%">&nbsp;</td>
                        <td width="13%">&nbsp;</td>
                        <td width="8%"><img src="http://www.google.co.uk/emails/Template2013/images/FB.png" alt="Facebook icon" width="24" height="23" border="0" class="socialicons"/></td>
                        <td width="7%"><img src="http://www.google.co.uk/emails/Template2013/images/twit.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
                        <td width="7%"><img src="http://www.google.co.uk/emails/Template2013/images/youtube.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
                        <td width="8%"><img src="http://www.google.co.uk/emails/Template2013/images/flickr.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
                        <td width="6%"><img src="http://www.google.co.uk/emails/Template2013/images/gplus.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
                      </tr>
                  </table>
                </div>




  </td>
        <td></td>
    </tr>
</table><!-- /HEADER -->


<!-- BODY -->
<table class="body-wrap">
    <tr>
        <td></td>
        <td class="container" bgcolor="#FFFFFF">

            <div class="content">
                 <table class="nav" width="100%">
                            <tr>
                              <td class="container" bgcolor="#FFFFFF">&nbsp;&nbsp; 
<a href="http://www.google.co.uk/ski-resorts/austria-ski-holidays/?em=cs080213" target="_blank">Austria</a>&nbsp; &#124; 
<a href="http://www.google.co.uk/ski-resorts/france-ski-holidays/?em=cs080213" target="_blank" >France</a>&nbsp; &#124;
<a href="http://www.google.co.uk/ski-resorts/italy-ski-holidays/?em=cs080213" target="_blank" > Italy</a>&nbsp; &#124; 
<a href="http://www.google.co.uk/ski-resorts/switzerland-ski-holidays/?em=cs080213" target="_blank" >Switzerland</a>&nbsp; &#124;
<a href="http://www.google.co.uk/ski-resorts/canada-ski-holidays/?em=cs080213" target="_blank" > Canada</a>&nbsp; &#124;
<a href="http://www.google.co.uk/ski-resorts/usa-ski-holidays/?em=cs080213" target="_blank" > USA</a>&nbsp; &#124; 
<a href="http://www.google.co.uk/ski-resorts/ski-holidays/?em=cs080213" target="_blank"> All Ski destinations</a></td>
                            </tr>
                        </table>
            <table>
                <tr>
                    <td>
                    <!-- A Real Hero (and a real human being) -->
                        <p><img src="http://www.google.co.uk/emails/Template2013/images/hero_image_template.jpg" />  

                       </p><!-- /hero -->
                      <p class="topNote"></p>
                      <!-- Callout Panel -->
                      <h1>Welcome Mr Smith,</h1>
                        <p class="callout">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
                    </p>
                        <br />
                  <h3>Subheader 1</h3>

                        <p class="subtext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
                       <table class="double" width="100%">
                            <tr>
                                <td>

                                    <!--- column 1 -->
                                  <table align="center" class="column">
                                        <tr>
                                            <td>                
                                    <p><img src="http://placehold.it/280x150" /></p>                                        
                                            </td>
                                        </tr>
                                  </table><!-- /column 1 -->    

                                    <!--- column 2 -->
                                    <table align="left" class="column" bgcolor="">
                                        <!--<tr bgcolor="#1b3281">
                                            <td>                                
                                                <p style="color:#FFFFFF; font-weight:bold;">Delta Whistler Village, CANADA</p>
                                            </td>
                                      </tr>-->
                                        <tr>
                                          <td>
                                                          <h4>Delta Whistler Village</h4>

                                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis autem vel eum iriure dolor in hendrerit in </p></td>
                                      </tr>                
                                  </table>                                <!-- /column 2 -->

                              </td>
                            </tr>
                        </table> <br />
                         <table class="double" width="100%">
                            <tr>
                                <td>

                                    <!--- column 1 -->
                                  <table align="center" class="column">
                                        <tr>
                                            <td>                
                                    <p><img src="http://placehold.it/280x150" /></p>                                        
                                            </td>
                                        </tr>
                                  </table><!-- /column 1 -->    

                                    <!--- column 2 -->
                                    <table align="left" class="column" bgcolor="">
                                        <!--<tr bgcolor="#1b3281">
                                            <td>                                
                                                <p style="color:#FFFFFF; font-weight:bold;">Delta Whistler Village, CANADA</p>
                                            </td>
                                      </tr>-->
                                        <tr>
                                          <td>
                                                          <h4>Delta Whistler Village</h4>

                                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis autem vel eum iriure dolor in hendrerit in </p></td>
                                      </tr>                
                                  </table>                                <!-- /column 2 -->

                              </td>
                            </tr>
                        </table> 

                        <!-- A Real Hero (and a real human being) -->
                        <p>&nbsp;</p><!-- /hero -->

                    <!-- Callout Panel -->
                        <p class="callout">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. <a href="#">Do it Now! &raquo;</a>
                        </p><!-- /Callout Panel -->

                        <h3>Title Ipsum <small>This is a note.</small></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        <a class="btn">Click Me!</a>

                        <br/>
                        <br/>                           

                        <!-- social & contact -->
                        <table class="social" width="100%">
                            <tr>
                                <td>

                                    <!--- column 1 -->
                                    <table align="left" class="column">
                                        <tr>
                                            <td>                

                                                <h5 class="">Connect with Us:</h5>
                                                <p class=""><a href="#" class="soc-btn fb">Facebook</a> <a href="#" class="soc-btn tw">Twitter</a> <a href="#" class="soc-btn gp">Google+</a></p>


                                            </td>
                                        </tr>
                                    </table><!-- /column 1 -->  

                                    <!--- column 2 -->
                                    <table align="left" class="column">
                                        <tr>
                                            <td>                

                                                <h5 class="">Contact Info:</h5>                                             
                                                <p>Phone: <strong>408.341.0600</strong><br/>
                Email: <strong><a href="emailto:hseldon@trantor.com">hseldon@trantor.com</a></strong></p>

                                            </td>
                                        </tr>
                                    </table><!-- /column 2 -->

                                    <span class="clear"></span> 

                                </td>
                            </tr>
                        </table><!-- /social & contact -->


                    </td>
                </tr>
            </table>
            </div>

        </td>
        <td></td>
    </tr>
</table><!-- /BODY -->

<!-- FOOTER -->
<table class="footer-wrap">
    <tr>
        <td></td>
        <td class="container">

                <!-- content -->
                <div class="content">
                <table>
                <tr>
                    <td align="center">
                        <p>
                            <a href="#">Terms</a> |
                            <a href="#">Privacy</a> |
                            <a href="#"><unsubscribe>Unsubscribe</unsubscribe></a>
                        </p>
                    </td>
                </tr>
            </table>
                </div><!-- /content -->

        </td>
        <td></td>
    </tr>
</table><!-- /FOOTER -->

</body>
</html>

我也愿意接受不同的建议。

谢谢。

5 个答案:

答案 0 :(得分：0)

尝试在此类媒体查询中加入

.socialicons { padding-left: 14%; }

答案 1 :(得分：0)

问题：你总是需要5px的空间吗？

一种方法是在项目之间添加空td并将宽度设置为5像素，但是，通过添加应用了默认字体设置的非宽度声明单元格，或者我应该说“隐含”，这几乎可以实现相同的效果。当没有声明时，回退到用户为字体大小显示设置的内容（由于某种原因不属于级联的一部分......） “空”并且没有宽度使它们成为“自动”的宽度，这意味着它们具有响应型的倾向而不被强制进入设定宽度。请参阅以下示例：

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="socialicons">
                      <tr>
                        <td width="51%">&nbsp;</td>
                        <td width="10%">&nbsp;</td>
                        <td width="8%" style="font-size:3px; line-height:3px;"><img src="http://www.google.co.uk/emails/Template2013/images/FB.png" alt="Facebook icon" width="24" height="23" border="0" class="socialicons"/></td>
                        <td>&nbsp;</td>
                        <td width="7%" style="font-size:3px; line-height:3px;"><img src="http://www.google.co.uk/emails/Template2013/images/twit.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
                        <td>&nbsp;</td>
                        <td width="7%" style="font-size:3px; line-height:3px;"><img src="http://www.google.co.uk/emails/Template2013/images/youtube.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
                        <td>&nbsp;</td>
                        <td width="8%" style="font-size:3px; line-height:3px;"><img src="http://www.google.co.uk/emails/Template2013/images/flickr.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
                        <td>&nbsp;</td>
                        <td width="6%" style="font-size:3px; line-height:3px;"><img src="http://www.google.co.uk/emails/Template2013/images/gplus.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
                      </tr>
                  </table>

旁注：当混合百分比和固定宽度时，将一个没有声明宽度的单元格作为“自动”大小来补偿极小或极大宽度的视图可能是一个好习惯。

当然，这是假设某些电子邮件客户端正在删除<head>的css中的任何声明，并且您需要一个后备布局修复。

添加：

<td width="8%" style="min-width:20px (or whatever your pixel width for the icon is); ... width:20px\9;"><img>

反斜杠+ 9黑客为IE内联强制宽度为20像素。

答案 2 :(得分：0)

尝试使用cellpadding="5"。这将在所有表格单元格之间保留5px。

答案 3 :(得分：0)

将填充为0并在体内图像之间，使用类似图像间隔的东西来定义图标之间所需的宽度.Spacer是空白图像，其中没有任何内容。这将消除css并使其与所有电子邮件客户端更加一致。

<table cellpadding="0" cellspacing="0" border="0">
 <tr>
  <td><img src="images/spacer.gif" width="1" height="10" style="display:block"/></td>
 </tr>
</table>

答案 4 :(得分：0)

您可以使用的一个技巧是

<table width="680" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ebebeb">
<tr>
    <td width="100%">
        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td>
                    <table cellpadding="0" cellspacing="0" border="0" align="center">
                        <tr>
                            <td valign="top" style="font-size: 12px; color: #a2a2a2; font-weight: normal; font-family: Helvetica, Arial, sans-serif; line-height: 26px; vertical-align: top; text-align:center; padding:20px 0 15px">
                                <table align="center">
                                    <tr>
                                        <td>
                                            <a style="text-decoration:none" href="https://www.example.com">
                                                <img src="https://www.emailonacid.com/images/emails/stamplia1/facebook.png" width="35" height="35" alt="Facebook" title="Facebook" border="0" />
                                            </a>
                                        </td>
                                        <td>
                                            <a style="text-decoration:none" href="https://www.example.com">
                                                <img src="https://www.emailonacid.com/images/emails/stamplia1/twitter.png" width="35" height="35" alt="Twitter" title="Twitter" border="0" />
                                            </a>
                                        </td>
                                        <td>
                                            <a style="text-decoration:none" href="https://www.example.com">
                                                <img src="https://www.emailonacid.com/images/emails/stamplia1/google.png" width="35" height="35" alt="Google" title="Google" border="0" />
                                            </a>
                                        </td>
                                        <td>
                                            <a style="text-decoration:none" href="https://www.example.com">
                                                <img src="https://www.emailonacid.com/images/emails/stamplia1/rss.png" width="35" height="35" alt="RSS" title="RSS" border="0" />
                                            </a>
                                        </td>
                                        <td>
                                            <a style="text-decoration:none" href="https://www.example.com">
                                                <img src="https://www.emailonacid.com/images/emails/stamplia1/mail.png" width="35" height="35" alt="Mail" title="Mail" border="0" />
                                            </a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>

这是一个jsfiddle，可以看到它的实际效果：http://jsfiddle.net/ahykdum5/

相关问题
最新问题