【发布时间】：2015-03-13 20:57:22
【问题描述】：
我正在为客户设计电子邮件活动模板并遇到问题。尝试将我的移动样式设置为 font-size:100% 重要！；但这里似乎存在尺寸问题。唯一受影响的是#requiredFooterText td、leadline td、#full td 和#paragraphText。它根本不会针对移动设备调整大小，我需要将其调整为 14 像素。图一是我拥有的，图二是我想要的。
图片1-
图2-
我尝试将字体大小的百分比也强制为 24 像素而不是 14 像素。但是，它会在此过程中删除移动英雄和页脚图像。
希望我已经对自己进行了充分的解释。代码如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style data="noinline">
.appleLink a,
.appleLink {
color:#777777 !important;
text-decoration:none !important;
}
.appleLinkGray a,
.appleLinkGray {
color:#777777 !important;
text-decoration:none !important;
}
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
.aBn {
border-bottom: 0;
}
div #mainWrapper {width:100% !important;
table-layout:fixed !important;
}
body {
margin:0; !important
padding:0; !important
}
/* MOBILE STYLES */
@media only screen and (max-device-width: 480px) {
body[yahoo=yes] {
margin: 0 !important;
padding: 0 !important;
}
table[class=mobileHide],
td[class=mobileHide],
span[class=mobileHide] {
display: none !important;
}
div[class=mobileShow] {
display: block !important;
max-height: none !important;
}
table[class=mobileShow] {
display: table !important;
max-height: none !important;
}
a[class=mobileShow] {
display: inline !important;
max-height: none !important;
}
img[class=mobileShow] {
display: block !important;
max-height: none !important;
}
table[id=mainWrapper],
table[id=main],
table[id=headerWrapper],
table[id=leadlineWrapper],
table[id=heroMobile],
table[id=messageWrapper],
table[id=footerMobile]
div[id=logo] {
margin:0 auto !important;
width:100% !important;
}
table[id=heroMobile] img
table[id=footerMobile] img {
display: block !important;
height:auto !important;
width:100% !important;
}
td[id=requiredFooterText]
td[id=leadline]
div[id=paragraphText] {
font-size:100% !important;
}
td[id=full] {
display:block;
width:100%;
font-size:100% !important;
}
img[class=icon] {
width:180px;
height:160px;
margin-bottom:20px;
}
}
/* end MOBILE STYLES*/
</style>
<style>
/* DESKTOP STYLES */
.appleLink a,
.appleLink {
color:#555555 !important;
text-decoration:none !important;
}
.appleLinkGray a,
.appleLinkGray {
color:#555555 !important;
text-decoration:none !important;
}
.mobileShow,
.mobileShow img {
display: none !important;
max-height: 0;
}
img {
display:block;
border:0;
}
p {
margin:0;
padding:0;
display:inline;
}
table {
margin: 0 auto;
}
table td {
border-collapse:collapse;
}
#paragraphText {
color: #000000;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
}
#mainWrapper {
background: #dadada;
}
#main {
background: #ffffff;
}
#leadlineWrapper {
background: #333333;
}
#leadline {
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 1.25;
padding-bottom: 14px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
}
#messageBody {
padding:20px;
}
#messageBody a {
color: #d46128;
}
#bulletlist td {
vertical-align:top;
color: #000000;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
}
#logo {
background-color:#333333;
margin: 0 auto;
width:600px;
padding-top:20px;
padding-bottom:20px;
}
#requiredFooterText {
color: #555555;
font-family: Arial, sans-serif;
font-size: 10px;
line-height: 1.25;
padding-top: 30px;
text-align: center;
margin:0;
}
/* end DESKTOP STYLES*/
</style>
</head>
<body yahoo="yes" style="-webkit-text-size-adjust:none; margin: 0; padding:0;" bgcolor="#dadada">
<table id="mainWrapper" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<table id="headerWrapper" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table id="leadlineWrapper" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td class="ec_item" id="leadline">Get a premier education on Florida's Gulf Coast.</td>
</tr>
</table><!-- /#leadlineWrapper -->
</td>
</tr>
</table><!-- /#headerWrapper -->
<table id="main" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
<td class="ec_item" id="heroWrapper">
<table class="mobileHide" id="heroDesktop" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a href="cta" target="_blank">
<img src="" width="600" height="419" border="0" style="color: #262626; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table>
<!-- /#heroDesktop -->
<div class="mobileShow">
<table class="mobileShow" id="heroMobile" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a class="mobileShow" href="cta" target="_blank">
<img class="mobileShow" src="" width="320" height="226" border="0" style="color: #333333; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table><!-- /#heroMobile -->
</div>
</td>
</tr><!-- /hero -->
<tr>
<td id="messageContainer">
<table id="messageWrapper" width="590" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td style="text-transform: none;" id="messageBody">
<div class="ec_item" id="paragraphText">
<div width="100%" height="15"><img src="" /></div>
{First_name},<br /><br />
When you step onto the <strong>Blank</strong> campus, you know you've arrived somewhere special. In fact, we're one of only 40 schools featured in the book <em>Colleges That Change Lives</em>.
<div width="100%" height="15"><img src="" /></div>
<div width="100%" height="15"><img src="" /></div>
</div>
<table dir="rtl" id="bulletlist" width="100%">
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>188 acres of waterfront campus</strong> give you unlimited access to the living laboratory of the Gulf of Mexico. We offer an exhilarating academic experience and constantly strive toward inspiring you to THINK<strong>OUT</strong>SIDE.</p>
</td>
<td width="1%" id="full"><img src="" /></td>
<td width="1%" dir="ltr" id="full" class="ec_item">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet1 -->
<tr>
<td width="100%" height="15"></td>
</tr><!-- /spacing -->
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>40 majors and 45 minors</strong> allow you to pursue a range of interests. You can even self-design your own major.</p>
</td>
<td width="1%" id="full"><img src="" /></td>
<td width="1%" dir="ltr" id="full" class="ec_item">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet2 -->
<tr>
<td width="100%" height="15"></td>
</tr><!-- /spacing -->
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>96 percent of students</strong> receive some sort of financial aid, and individual merit scholarships of up to $19,000 are available.</p>
</td>
<td width="1%" dir="ltr" id="full"><img src="" /></td>
<td width="1%" dir="ltr" id="full" class="ec_item">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet3 -->
<tr>
<td width="100%" height="15" class="ec_item"></td>
</tr><!-- /spacing -->
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>Autumn Term</strong> is an immersive three-week experience led by an expert faculty mentor. Opening with the Ceremony of Lights, your first academic course is a special opportunity to transition to college-level learning while becoming a strong member of the community.</p>
</td>
<td width="1%" id="full" class="ec_item"><img src="" /></td>
<td width="1%" dir="ltr" class="ec_item" id="full">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet4 -->
</table>
<div class="ec_item" id="paragraphText">
<div width="100%" height="15"><img src="" /></div>
<div width="100%" height="15"><img src="" /></div>
<strong><u><a href="cta">Confirm your information</a></u></strong> to find out more ways encourages you to THINK<strong>OUT</strong>SIDE.
</div>
<div width="100%" height="15"><img src="" /></div>
</td><!-- /#messageBody -->
</tr>
</table><!-- /#messageWrapper -->
</td>
</tr>
<tr>
<td class="ec_item" id="footerContainer">
<table class="mobileHide" id="footerDesktop" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a href="cta" target="_blank">
<img src="" width="600" height="155" border="0" style="color: #262626; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table>
<!-- /#footerDesktop -->
<div class="mobileShow">
<table class="mobileShow" id="footerMobile" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a class="mobileShow" href="cta" target="_blank">
<img class="mobileShow" src="" width="320" height="144" border="0" style="color: #9c3022; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table>
<!-- /#footerMobile -->
</div>
</td>
</tr>
<tr>
<td>
<div class="ec_item" id="logo" align="center">
<a href="">
<img height="49" width="160" style="margin:20px;" src="" style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;" alt="" /></a>
</div>
</td>
</tr>
</tbody>
</table><!-- /#main -->
<table id="requiredFooter" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td id="requiredFooterText">
This message was sent to <a href="mailto:%7BEMAIL%7D" target="_blank" style="color:#333333;"><span style="color:#333333;">{EMAIL}</span></a> by <a href="mailto:%7BFROM_EMAIL%7D" target="_blank" style="color:#333333;"><span style="color:#333333;">{FROM_EMAIL}</span></a>.<br /><br />
=
We received your contact information from {CONTACT_SOURCE}.<br /><a href="%7BUnsubscribeURL%7D" target="_blank" style="color:#333333;"><span style="color:#333333;">Unsubscribe</span></a> from future email communications from Office of Admission.<br /><br /><br />
</td>
</tr>
</table><!-- /#requiredFooter -->
</td>
</tr>
</table><!-- /#mainWrapper -->
</body>
</html>【问题讨论】：
标签： html css mobile resize font-size