媒体查询我遇到了一些困难

问题描述 投票:-1回答:1

我正在处理响应式Html电子邮件和媒体查询无法正常工作。

https://drive.google.com/open?id=1brZBV7hLqRw_KL37NXMyWgwYJpuz1Hpq

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Our Vineyard</title>
		<style type="text/css">

			body {
				margin: 0; padding: 0;
			}
			
			@media only screen and (max-width: 660px) {

                    table.container { width: 480px !important; }

                    td.logo img { display: none; }
                    td.logo { background: #fff url(images/logo_medium.gif) no-repeat 10px 10px; height: 45px; }
			}

			@media only screen and (max-width: 510px) {

                    table.container { width: 100% !important; }
                    table.container td  { border: none !important; }

                    td.logo { background: #fff url(images/logo_small.gif) no-repeat center 10px; height: 32px; }
			}

		</style>
	</head>	
	<body bgcolor="#efe1b0">
     
        <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#efe1b0">
        	<tr>
        		<td>
        			<table class="container" width="640" align="center" border="0" cellpadding="0" cellspacing="0">
        				<tr>
        					<td valign="top" class="logo" bgcolor="#ffffff" style="padding: 10px 20px 0px 30px; 
        					     border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; border-top: 1px solid #dbc064;">
        					     <a href="#"></a><img style="margin-left: -15px;" src="images/logo_large.gif" alt="Our Vineyard" width="585" height="45" border="0"></a>
        						
        					</td>
        				</tr>
        				<tr>
        					<td valign="top" class="headline" bgcolor="#ffffff" style="padding: 15px 20px 5px 30px; border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px;">
        						<h1 style="margin: 0px 0px 15px 0px; font-weight: normal; font-size: 32px; color: #723c7f;">Main Heading Here</h1>
        						
        					</td>
        				</tr>
        				<tr>
        					<td valign="top" bgcolor="#f5f2e5" class="banner" style="border-left: 1px solid #dbc064; border-right: 1px solid #dbc064;">
        						<img src="images/banner_large.jpg" width="638" height="180" alt="Photo of Our Vineyard">
        						
        					</td>
        				</tr>
        				<tr>
        					<td valign="top" bgcolor="#f5f2e5" valign="top" class="content" style="padding: 30px 30px 10px 30px; border-right: 1px solid #dbc064; border-left: 1px solid #dbc064; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #654308; background: #f5f2e2 url(images/banner_large_ghost.jpg) no-repeat 0px 0px;">
                                 
                                 <table width="160" align="right" class="button" style="margin: 0px 0px 10px 30px;">
                                 	<tr>
                                 		<td style="text-align: center; background-color: #71a412; padding: 10px 15px; border-radius: 5px;">
                                 			<a href="#" style="color: #fff; font-size: 18px; letter-spacing: 1px; text-decoration: none; text-shadow: 0px 2px 2px #3a5606; font-family: arial,Helvetica,sans-serif">Learn More</a>
                                 			
                                 		</td>
                                 	</tr>
                                 </table>

                                 Lorem ipsum dolor sit amet consec tetur adip isicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercita tion ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum eu fugiat nulla.
                                 <br><br>
                                 Enjoy,
                                 <br>
                                 <img src="images/chris.gif" alt="Chris" width="90" height="40">

           					</td>
        				</tr>
        				<tr>
        					<td valign="top" bgcolor="#f5f2e5" class="promos" style="padding: 10px 30px 25px 30px; border-right:1px solid #dbc064; border-left:1px solid #dbc064; background-color: #f5f2e5; font-family: Arial, Helvetica, sans-serif;">
                                <table class="promo_1" width="270" align="left">
                                	<tr>
                                		<td>
                                			<img class="promo" alt="Promo image 1" src="images/promo_1_large.jpg">
                                            <h3 style="font-size:16px;">Promo heading here</h3>
                                            Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod.
                                            <br><br>
                                            <a href="#" style="background-color: #71a412; border-radius: 5px; color: #fff; padding: 5px 10px 5px 10px; text-decoration: none; text-shadow: 0px 2px 2px #3a5606;">Learn more</a>

                                		</td>
                                	</tr>
                                </table>
                                <table class="promo_2" width="270" align="right">
                                	<tr>
                                		<td>
                                			<img class="promo" alt="Promo image 2" src="images/promo_2_large.jpg">
                                            <h3 style="font-size:16px;">Promo heading here</h3>
                                            Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod.
                                            <br><br>
                                            <a href="#" style="background-color: #71a412; border-radius: 5px; color: #fff; padding: 5px 10px 5px 10px; text-decoration: none; text-shadow: 0px 2px 2px #3a5606;">Learn more</a>

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

        					</td>
        				</tr>
        				<tr>
        					<td valign="top" bgcolor="#55315d" class="callout" style="background-color: #55315d; padding: 30px; border-right: 1px solid #dbc064; border-bottom: 1px solid #dbc064; border-left: 1px solid #dbc064;">
                                <table class="callout_1" width="135" align="left" border="0" cellspacing="0" cellpadding="0">
	                               <tr>
		                               <td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height: 16px; color: #ffffff;">
			                               <img src="images/icon_grapes.gif" width="75" height="75"><br>
			                               Lorem ipsum dolor sit amet conctetur adipi eiu smod incid amet idun.
			                               <br><br>
			                               <a href="#" style="color: #efe1b0;">Learn more</a>
		                                </td>
                               	    </tr>
                                </table>
                                <table class="callout_2" width="135" align="left" border="0" cellspacing="0" cellpadding="0">
	                                <tr>
		                                <td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height: 16px; color: #ffffff;">
			                                <img src="images/icon_bottle.gif" width="75" height="75"><br>
			                                 Ddolore eu fugiat nulla pariatur cupi datat excepteur occaet cupi noin.
			                                <br><br>
			                                <a href="#" style="color: #efe1b0;">Learn more</a>
		                                </td>
	                                </tr>
                                </table>

                                <table class="callout_3" width="135" align="left" border="0" cellspacing="0" cellpadding="0">
	                                <tr>
		                                <td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 16px; color: #ffffff;">
			                                <img src="images/icon_basket.gif" width="75" height="75"><br>
			                                Eiusmod tempor inci didunt ut magna aliqua ut enim ad iam quis.
			                                <br><br>
			                                <a href="#" style="color: #efe1b0;">Learn more</a>
		                                </td>
	                                </tr>
                                </table>

                                <table class="callout_4" width="135" align="left" border="0" cellspacing="0" cellpadding="0">
	                                <tr>
		                                <td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 16px; color: #ffffff;">
			                                <img src="images/icon_camera.gif" width="75" height="75"><br>
			                                 Excepteur sint occaecat cupidatat non proident sunt in culpa qui molit.
			                                <br><br>
			                                <a href="#" style="color: #efe1b0;">Learn more</a>
		                                </td>
	                                </tr>
                                </table>

                                <br style="clear: both;">

                            </td>
        				</tr>
        				<tr>
        					<td valign="top" class="footer" style="padding: 10px 0px 30px 0px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #b2a16e;">
        						&copy; Your Company Name. PLEASE DO NOT REPLY TO THIS MESSAGE:
                                <br><br>
                                Your <a href="#" style="color:#000000;">privacy</a> is important to us. Please use this link to <a href="#" style="color:#000000;">unsubscribe</a>.
                                <br><br>
                                 Lorem ipsum dolor sit amet consectetur adipi sicing elit sed do eiusmod tempor inci didunt ut labore et dolore iqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                             </td>
        				</tr>
        			</table>
        		</td>
        	</tr>
        </table>

	</body>	
</html>
email.html
media-queries
1个回答
0
投票

您错过了head标记处的元视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

您需要添加到head标签,@ media将基于设备宽度应用

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

请注意,css内容将从上到下应用最后一个匹配选择器。如果你想隐藏徽标,你需要移动@media 660px向下移动@media 510px

@media only screen and (max-width: 510px) {

                    table.container { width: 100% !important; }
                    table.container td  { border: none !important; }

                    td.logo { background: #fff url(images/logo_small.gif) no-repeat center 10px; height: 32px; }
            }

            @media only screen and (max-width: 660px) {

                    table.container { width: 480px !important; }

                    td.logo img { display: none; }
                    td.logo { background: #fff url(images/logo_medium.gif) no-repeat 10px 10px; height: 45px; }
            }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Our Vineyard</title>
		<style type="text/css">

			body {
				margin: 0; padding: 0;
			}
			
			@media only screen and (max-width: 660px) {

                    table.container { width: 480px !important; }

                    td.logo img { display: none; }
                    td.logo { background: #fff url(images/logo_medium.gif) no-repeat 10px 10px; height: 45px; }
			}

			@media only screen and (max-width: 510px) {

                    table.container { width: 100% !important; }
                    table.container td  { border: none !important; }

                    td.logo { background: #fff url(images/logo_small.gif) no-repeat center 10px; height: 32px; }
			}

		</style>
	</head>	
	<body bgcolor="#efe1b0">
     
        <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#efe1b0">
        	<tr>
        		<td>
        			<table class="container" width="640" align="center" border="0" cellpadding="0" cellspacing="0">
        				<tr>
        					<td valign="top" class="logo" bgcolor="#ffffff" style="padding: 10px 20px 0px 30px; 
        					     border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; border-top: 1px solid #dbc064;">
        					     <a href="#"></a><img style="margin-left: -15px;" src="images/logo_large.gif" alt="Our Vineyard" width="585" height="45" border="0"></a>
        						
        					</td>
        				</tr>
        				<tr>
        					<td valign="top" class="headline" bgcolor="#ffffff" style="padding: 15px 20px 5px 30px; border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px;">
        						<h1 style="margin: 0px 0px 15px 0px; font-weight: normal; font-size: 32px; color: #723c7f;">Main Heading Here</h1>
        						
        					</td>
        				</tr>
        				<tr>
        					<td valign="top" bgcolor="#f5f2e5" class="banner" style="border-left: 1px solid #dbc064; border-right: 1px solid #dbc064;">
        						<img src="images/banner_large.jpg" width="638" height="180" alt="Photo of Our Vineyard">
        						
        					</td>
        				</tr>
        				<tr>
        					<td valign="top" bgcolor="#f5f2e5" valign="top" class="content" style="padding: 30px 30px 10px 30px; border-right: 1px solid #dbc064; border-left: 1px solid #dbc064; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #654308; background: #f5f2e2 url(images/banner_large_ghost.jpg) no-repeat 0px 0px;">
                                 
                                 <table width="160" align="right" class="button" style="margin: 0px 0px 10px 30px;">
                                 	<tr>
                                 		<td style="text-align: center; background-color: #71a412; padding: 10px 15px; border-radius: 5px;">
                                 			<a href="#" style="color: #fff; font-size: 18px; letter-spacing: 1px; text-decoration: none; text-shadow: 0px 2px 2px #3a5606; font-family: arial,Helvetica,sans-serif">Learn More</a>
                                 			
                                 		</td>
                                 	</tr>
                                 </table>

                                 Lorem ipsum dolor sit amet consec tetur adip isicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercita tion ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum eu fugiat nulla.
                                 <br><br>
                                 Enjoy,
                                 <br>
                                 <img src="images/chris.gif" alt="Chris" width="90" height="40">

           					</td>
        				</tr>
        				<tr>
        					<td valign="top" bgcolor="#f5f2e5" class="promos" style="padding: 10px 30px 25px 30px; border-right:1px solid #dbc064; border-left:1px solid #dbc064; background-color: #f5f2e5; font-family: Arial, Helvetica, sans-serif;">
                                <table class="promo_1" width="270" align="left">
                                	<tr>
                                		<td>
                                			<img class="promo" alt="Promo image 1" src="images/promo_1_large.jpg">
                                            <h3 style="font-size:16px;">Promo heading here</h3>
                                            Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod.
                                            <br><br>
                                            <a href="#" style="background-color: #71a412; border-radius: 5px; color: #fff; padding: 5px 10px 5px 10px; text-decoration: none; text-shadow: 0px 2px 2px #3a5606;">Learn more</a>

                                		</td>
                                	</tr>
                                </table>
                                <table class="promo_2" width="270" align="right">
                                	<tr>
                                		<td>
                                			<img class="promo" alt="Promo image 2" src="images/promo_2_large.jpg">
                                            <h3 style="font-size:16px;">Promo heading here</h3>
                                            Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod.
                                            <br><br>
                                            <a href="#" style="background-color: #71a412; border-radius: 5px; color: #fff; padding: 5px 10px 5px 10px; text-decoration: none; text-shadow: 0px 2px 2px #3a5606;">Learn more</a>

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

        					</td>
        				</tr>
        				<tr>
        					<td valign="top" bgcolor="#55315d" class="callout" style="background-color: #55315d; padding: 30px; border-right: 1px solid #dbc064; border-bottom: 1px solid #dbc064; border-left: 1px solid #dbc064;">
                                <table class="callout_1" width="135" align="left" border="0" cellspacing="0" cellpadding="0">
	                               <tr>
		                               <td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height: 16px; color: #ffffff;">
			                               <img src="images/icon_grapes.gif" width="75" height="75"><br>
			                               Lorem ipsum dolor sit amet conctetur adipi eiu smod incid amet idun.
			                               <br><br>
			                               <a href="#" style="color: #efe1b0;">Learn more</a>
		                                </td>
                               	    </tr>
                                </table>
                                <table class="callout_2" width="135" align="left" border="0" cellspacing="0" cellpadding="0">
	                                <tr>
		                                <td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height: 16px; color: #ffffff;">
			                                <img src="images/icon_bottle.gif" width="75" height="75"><br>
			                                 Ddolore eu fugiat nulla pariatur cupi datat excepteur occaet cupi noin.
			                                <br><br>
			                                <a href="#" style="color: #efe1b0;">Learn more</a>
		                                </td>
	                                </tr>
                                </table>

                                <table class="callout_3" width="135" align="left" border="0" cellspacing="0" cellpadding="0">
	                                <tr>
		                                <td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 16px; color: #ffffff;">
			                                <img src="images/icon_basket.gif" width="75" height="75"><br>
			                                Eiusmod tempor inci didunt ut magna aliqua ut enim ad iam quis.
			                                <br><br>
			                                <a href="#" style="color: #efe1b0;">Learn more</a>
		                                </td>
	                                </tr>
                                </table>

                                <table class="callout_4" width="135" align="left" border="0" cellspacing="0" cellpadding="0">
	                                <tr>
		                                <td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 16px; color: #ffffff;">
			                                <img src="images/icon_camera.gif" width="75" height="75"><br>
			                                 Excepteur sint occaecat cupidatat non proident sunt in culpa qui molit.
			                                <br><br>
			                                <a href="#" style="color: #efe1b0;">Learn more</a>
		                                </td>
	                                </tr>
                                </table>

                                <br style="clear: both;">

                            </td>
        				</tr>
        				<tr>
        					<td valign="top" class="footer" style="padding: 10px 0px 30px 0px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #b2a16e;">
        						&copy; Your Company Name. PLEASE DO NOT REPLY TO THIS MESSAGE:
                                <br><br>
                                Your <a href="#" style="color:#000000;">privacy</a> is important to us. Please use this link to <a href="#" style="color:#000000;">unsubscribe</a>.
                                <br><br>
                                 Lorem ipsum dolor sit amet consectetur adipi sicing elit sed do eiusmod tempor inci didunt ut labore et dolore iqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                             </td>
        				</tr>
        			</table>
        		</td>
        	</tr>
        </table>

	</body>	
</html>