HTML代码
<div style="background-color: #e4e4e4">
<table align="center" border="0" cellpadding="0" cellspacing="0" class=
"table" width="600">
<tr>
<td class="cell">
<table border="0" cellpadding="0" cellspacing="0" style=
"background-color: #FFFFFF" width="100%">
<tr>
<td>
<table>
<tr>
<td><span style="font-size: 10px;color:#666666">If this email
doesn't display properly you can view it in your web
browser<a href="http://www.worldtravelhub.com.au" style=
"text-decoration:underline;color:blue;" target=
"_blank">www.worldtravelhub.com.au</a></span></td>
</tr>
</table>
<table align="center" border="0" cellpadding="10" cellspacing="0"
class="w100">
<tr>
<td><img border="0" height="108" src=
"images/high_quality_logo_wth.png" style="display: block"
width="500"></td>
</tr>
</table>
<table align="right" border="0" cellpadding="10" cellspacing="0"
class="w100">
<tr>
<td align="right" class="w100">
<!--<font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:22px"><strong>WorldTravelHub</strong></font><br>
<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:18px">Newsletter
</font>--></td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style=
"background-color: #FFFFFF" width="100%">
<tr>
<td>
<table align="left" border="0" cellpadding="10" cellspacing="0"
class="w100" width="290">
<!--<tr>
<td class="w100"><div class="left_align" face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:12px"><font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:11px"><strong>We'll get you the CHEAPEST flights to the</strong></font>
<font><span style="color:#ff5313;font-size:29px;">Indian Subcontinent </span></font>
</div>
</td>
</tr>-->
</table>
<table align="right" border="0" cellpadding="10" cellspacing="0"
class="w100" width="290">
<!-- <tr>
<td class="w100">
<img class="stamp" src="images/stamp.png" alt="CHEAPEST GAURANTEE" />
</td>
</tr>-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<!--<img src="images/600.png" border="0" style="display:block">-->
<div class="bgimg">
<p class="cheapest"><span class="bold">We'll get you the
CHEAPEST flights to the</span><br>
<span class="indsub">Indian Subcontinent</span></p>
</div>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style=
"background-color: #fff" width="100%">
<tr>
<td>
<table align="left" border="0" cellpadding="10" cellspacing="0"
class="w100" width="100%">
<tr>
<td class="w100"><span class="checkout-price"><span style=
"font-size:10px;">FROM</span> $850*
<!--<sup style="font-size:8px;margin-top:5px;">From</sup><sub>$850*</sub>--></span></td>
</tr>
</table>
<table align="right" border="0" cellpadding="10" cellspacing="0"
class="w100" width="290">
<tr>
<td class="w100">
<!--<font face="Arial, Helvetica, sans-serif" color="#666666" style="font-size:12px"><font face="Arial, Helvetica, sans-serif" color="#333333" style="font-size:14px"><strong>Lorem ipsum dolor sit amet</strong></font>-->
<div style="text-align: center; margin-right: 30px;">
<span style=
"color: #e62529; font-size: 20px; font-weight: bold;">Toll
Free: 1800 984 045</span><br>
<span style=
"font-size: 11px; letter-spacing: 2px;">info@worldtravelhub.com.au</span><br>
<span style=
"font-size: 11px; letter-spacing: 1px;">www.worldtravelhub.com.au</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style=
"background-color: white" width="100%">
<tr>
<td>
<table align="center" border="0" cellpadding="10" cellspacing="0"
class="w100" width="100%">
<tr>
<td class="w100">
<p style="text-align: center;"><span style=
"font-size: 22px;color:#e62529;letter-spacing:3px;font-weight:bold;">
Book online <span style="color:#000;">24/7</span> at
worldtravelhub.com.au</span><br>
<span style="font-size:8px;">*A Verifiable written quote
from another Australian registered travel businesses must
be aproved and fare quoted must be generally avaliable to
the public in the market and must be for the same date,seat
class,fare category and airline and given to us before we
make a booking for the customer.The quote must be for
booked fares originating in Australia to Indian
subcontinent.Lics No <span style=
"font-weight:bold;">2TA6049</span></span></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style=
"background-color: #888888" width="100%">
<tr>
<td>
<table align="left" border="0" cellpadding="10" cellspacing="0"
class="w100" width="290">
<tr>
<td class="w100"><strong>WorldTravelHub</strong><br>
Suite 4, 2 Kendall St,<br>
Harris Park NSW 2150</td>
</tr>
</table>
<table align="right" border="0" cellpadding="10" cellspacing="0"
class="w100" width="290">
<tr>
<td align="right" class="w100"><strong>Phone:</strong> +61 2
8005 2797<br>
<strong>Fax:</strong>+61 2 8005 4237<br>
<strong>Email:</strong> info@worldtravelhub.com.au</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td>If this email doesn't display properly you can view it in your
web browser<br>
<br></td>
</tr>
</table>
</td>
</tr>
</table>
</div><!--=========-->
CSS代码
body {
background-color:#e4e4e4;
font-family:'PT Sans Narrow',Arial,sans-serif
}
table {
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0
}
.ExternalClass * {
line-height:100%
}
@media only screen and (max-width: 480px) {
div,p,a,li,td {
-webkit-text-size-adjust:none!important
}
table[class="table"],td[class="cell"] {
width:300px!important
}
img {
display:block!important;
max-width:100%!important
}
[class].hide {
display:none!important
}
[class].w100 {
width:100%!important;
text-align:left!important
}
.cheapest {
margin-left:5px;
font-size:10px;
padding-top:10px;
font-family:'PT Sans Narrow',Arial,sans-serif;
max-width:100%!important
}
.bold {
font-weight:700
}
.indsub {
color:#e62529;
font-size:22px;
font-weight:700
}
.checkout-price {
top:400px
}/*.bgimg {
background-image: url('images/wth_map.jpg');
width: 100%;
background-size: contain;
background-repeat: no-repeat;
height: 0;
padding-bottom: 77%;
background-repeat: no-repeat;
}*/
}
@media only screen and (max-width: 767px) {
div,p,a,li,td {
/*-webkit-text-size-adjust: none !important;*/
}
table[class="table"],td[class="cell"] {
width:300px!important
}
img {
display:block!important;
max-width:100%!important
}
[class].hide {
display:none!important
}
[class].w100 {
width:100%!important;
text-align:left!important
}
.cheapest {
margin-left:5px;
font-size:10px;
padding-top:10px;
font-family:'PT Sans Narrow',Arial,sans-serif;
max-width:100%!important
}
.bold {
font-weight:700
}
.indsub {
color:#e62529;
font-size:22px;
font-weight:700
}
.checkout-price {
top:400px
}
}
.bgimg {
background-image:url(images/wth_map.jpg);
width:100%;
background-size:contain;
background-repeat:no-repeat;
height:0;
padding-bottom:77%;
/* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
background-repeat:no-repeat
}
.checkout-price {
position:absolute;
top:590px;
margin-left:25px;
width:120px;
height:120px;
font:24px/120px Helvetica,Arial,sans-serif;
color:#fff;
text-align:center;
text-shadow:0 -1px 1px rgba(black,.3);
text-indent:-1px;
letter-spacing:-1px;
background:#e54930;
border:1px solid;
border-color:#b33323 #ab3123 #982b1f;
border-radius:60px
}
.checkout-price:before {
content:'';
position:absolute;
top:3px;
bottom:3px;
left:3px;
right:3px;
border:2px solid #f5f8fb;
border-radius:60px
}
.cheapest {
margin-left:80px;
font-size:14px;
padding-top:22px;
font-family:'PT Sans Narrow',Arial,sans-serif
}
.bold {
font-weight:700
}
.indsub {
color:#e62529;
font-size:30px;
font-weight:700
}
从上面的代码我想知道如何将媒体查询应用于课程Cheapest和checkout-price？
我尝试过应用简单的媒体查询，但它似乎无法正常工作我无法找出问题所在。
答案 0 :(得分：1)
问题是你在开始编写媒体查询。这意味着首先它将检查媒体查询，然后它将覆盖您的类的实际声明。有两种方法可以阻止这种情况。
1. Move the media queries to the bottom.
2. Add 'important' keyword in your media queries if you don't want to move bottom.