我在本网站和其他网站上进行了搜索，但似乎无法找到明确的答案。我正在创建一个响应式电子邮件。是的，我已经完成了我的研究等，我只是在这里寻求一个方面的帮助，我知道这对确切知道这一切是如何工作的人来说很简单。我什至联系了 ZURB，我从那里获得了这个模板等等无济于事。
这是一个响应性问题，我不确定这是由于我使用的 Firefox 版本还是我的代码有问题...？我在每张 table 上都设置了 100% 的宽度(以防那是罪魁祸首)并且只有标题相应地移动。
我询问它是否是 CSS，但它在 Safari 中有效。非常感谢您的帮助并查看问题所在。
谢谢- 下面的代码。
<!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>
<style>
/* -------------------------------------
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: #0166b1;}
.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: #0166b1;
}
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; }
.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: 30px; color:#1b3180;}
h2 { font-weight:200; font-size: 27px;}
h3 { font-weight:500; font-size: 22px; color:#0166b1;}
h4 { font-weight:500; font-size: 20px;}
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.2;
}
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;
}
.panelcontent {
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; }
/* -------------------------------------------
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;
}
}
</style>
<!-- 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>Crystal Template</title>
<link rel="stylesheet" type="text/css" href="stylesheets/email.css" />
</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="#999999">
<tr>
<td><img src="http://placehold.it/200x50/" /></td>
<td align="right"><h6 class="collapse">Hero</h6></td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table><!-- /HEADER -->
<!-- BODY -->
<table class="body-wrap" width="100%">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF">
<div class="content" width="100%">
<table>
<tr>
<td>
<!-- A Real Hero (and a real human being) -->
<p><img src="http://placehold.it/600x300" /></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.
</p><!-- /Callout Panel -->
<h3>Subheader 1</h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<!-- panel content -->
<div class="panelcontent">
<table bgcolor="#cad9e4" width="100%">
<tr>
<td class="small" width="20%" style="vertical-align: top; padding-right:10px;"><img src="http://placehold.it/75x75" /></td>
<td>
<h4>Title Ipsum <small>This is a note.</small></h4>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<a class="btn">Clickity Click »</a>
</td>
</tr>
</table>
</div><!-- panel content -->
<!-- panel contentcad9e4 -->
<div class="panelcontent">
<table bgcolor="#cad9e4" width="100%">
<tr>
<td class="small" width="20%" style="vertical-align: top; padding-right:10px;"><img src="http://placehold.it/75x75" /></td>
<td>
<h4>Title Ipsum <small>This is a note.</small></h4>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<a class="btn">Clickity Click »</a>
</td>
</tr>
</table>
</div><!-- /panel content -->
<!-- Callout Panel -->
<!--<p class="callout">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. <a href="#">Do it Now! »</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" width="100%">
<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" width="100%">
<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>
最佳答案
您的 600x300 图片可防止正文缩小。使此图像的宽度灵活，它会起作用。
将其添加到媒体查询 block 中。
.container img { width:100% !important; }
它会使图像 flex 。
您的旧媒体查询。
@media 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;
}
}
具有灵活图像的媒体查询
@media 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 image */
.container img {width:100% !important;}
}
关于html - 响应式布局不在 FireFox 中调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15359852/