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 类？
我尝试应用简单的媒体查询，但它似乎不起作用我无法找出哪里出错了。
最佳答案
问题是您一开始就在编写媒体查询。这意味着首先它会检查媒体查询，然后它会被你的类的实际声明覆盖。有两种方法可以阻止它。
1. Move the media queries to the bottom.
2. Add 'important' keyword in your media queries if you don't want to move bottom.
关于html - 使用 css 对表格进行媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24645753/