CSS媒體調用不起作用

我試圖在此電子郵件設計中使用以下媒體調用。很抱歉張貼了很多代碼。當我達到660像素以下時，大標誌消失，但較小的標誌不出現在它的位置。徽標空間爲空白。CSS媒體調用不起作用

<!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"> 

      @media only screen and (max-width: 660px) { 
       table.container { width: 480px !important; } 
       td.logo img { display: none; } 
       td.logo { background: #c2ca19 url(../../My Site/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: #2cca19 url(../../My Site/Images/logo_small.gif) no-repeat center 10px; height:32px; } 
      } 

     </style> 
    </head> 
    <body bgcolor = "#efe1b0" background="../../My Site/Images/banner_large.jpg"> 
    <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 ="#"><img style= "margin-left:-15px" src="../../My Site/Images/logo_large.gif" alt="Our Vineyard" width="585" height="45" border="0"></a> 
     </td> 
     </tr> 
     <tr> 
     <td colspan="2" valign="top" bgcolor="#ffffff" class="headline" 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="../../My Site/Images/banner_large.jpg" width="638" height="180" alt="Photo of our Vineyard"></td> 
     </tr>

來源

2017-08-07 Phillip Money

我最初認爲這個問題是由於使用了不推薦的html屬性。具體來說，我認爲bgcolor可能會覆蓋你的css規則。但我已經運行你的代碼，並將圖像改爲lorem圖像，一切似乎都正常工作。你確定要指定圖片的正確位置嗎？ –

您錯過了添加視口meta，在您的腦海中添加meta元。

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

而且你應該有你的標準的CSS。

來源

2017-08-07 10:29:35

謝謝。我把查看端口元，但它沒有任何區別。我在哪裏放標準的CSS？對不起，我的無知。 –

嘗試在媒體查詢上添加標準css。 –

你好RaJesh。如何在媒體查詢上添加標準css。對不起，我對此很新。 –

CSS媒體調用不起作用

回答

相關問題