需要手机和平板设备显示不同的标志

Question

我使用这个主题http://goo.gl/3BwG7R

我已经改变了头部为黑色，并有轻徽建设一个电子商务网站。在移动设备和平板电脑上查看时，我需要标题为白色（原生），徽标为黑色。

我未能利用媒体查询来实现此目的。

主题有2个头文件，主文件调用其他文件来显示东西。

*** MAIN HEADER ------------------ 

<div id="logo" class="positionleft"><?php if_logo(); // print the logo html ?></div> 

-------------------------------------------- 

*** SECOND HEADER (called header-functions) ----------------- 

// print the logo html 
if(!function_exists("if_logo")){ 
function if_logo(){ 

     $logotype = if_get_option(THE_SHORTNAME . '_logo_type'); 
     $logoimage = if_get_option(THE_SHORTNAME . '_logo_image'); 
     $sitename = if_get_option(THE_SHORTNAME . '_site_name'); 
     $tagline = if_get_option(THE_SHORTNAME . '_tagline'); 

     if($sitename=="") $sitename = get_bloginfo('name'); 
     if($tagline=="") $tagline = get_bloginfo('description'); 
     if($logoimage == "") $logoimage = get_stylesheet_directory_uri() .   "/images/logo.png"; 
     ?> 
     <?php if($logotype == 'textlogo'){ ?> 

      <h1><a href="<?php echo home_url('/'); ?>" title="<?php echo  esc_attr(get_bloginfo('name', THE_LANG)); ?>"><?php echo $sitename; ?></a></h1><span  class="desc"><?php echo $tagline; ?></span> 

     <?php } else { ?> 

     <div id="logoimg"> 
     <a href="<?php echo home_url('/') ; ?>" title="<?php echo $sitename; ?>" > 
      <img src="<?php echo $logoimage ; ?>" alt="<?php echo $sitename; ?>" /> 
     </a> 
     </div> 

    <?php } ?> 

    <?php 
    } 
} 

*** MAIN CSS -------------------------- 

#logo{margin-right:7px;padding:14px 10px ;} 
#logo img{height:43px;} 
#logo h1{margin-bottom:0px; letter-spacing:-1px;} 
/* Menu */ 
#navigation{text-align:left;} 
#topnav{ 
margin:0; 
padding:0px 0 0 0px; 
list-style-type:none; 
overflow:visible; 
position:relative; 
float:right; 

} 

*** LAYOUT CSS --------------------- 

    #logo{text-align:center;margin:0px;} 
    #logoimg img{text-align:center;margin:0px auto; max-width:100%;} 

Answer 1

Here是一个快速标记一下它看起来喜欢使用媒体查询与IMG而不是使用一个背景图像。我使用div而不是图像，但它是相同的概念。如果您最小化浏览器，您将看到文本更改。

Answer 2

将徽标用作媒体查询的背景。

@media (min-width:769px){ 
    #logo{ 
     background-image: url(link/to/main/logo.png); 
    } 
} 

@media (max-width:768px){ 
    #logo{ 
     background-image: url(link/to/tablet/logo.png); 
    } 
} 

@media (max-width:480px){ 
    #logo{ 
     background-image: url(link/to/mobile/logo.png); 
    } 
}