需要在移动设备和平板设备中显示不同的标志答案

【问题标题】：Need to show different logo in mobile and tablet devices需要在移动设备和平板设备中显示不同的标志
【发布时间】：2014-04-02 21:48:57
【问题描述】：

我正在使用这个主题建立一个电子商务网站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%;}

【问题讨论】：

那么您尝试过哪些媒体查询？
您使用的是移动检测 php 脚本吗？如果是这样，那么您只需为 $logoimage 分配一个指向您的移动版本的路径值
@Ralph，我尝试创建 2 个徽标类 #logo 和 #mobilelogo 但不知道如何调用标题中的另一个徽标。
@Vector 我认为主题中没有移动检测 php 脚本。我没找到。

标签： css wordpress mobile header

【解决方案1】：

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

@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);
    }
}

【讨论】：

虽然此解决方案可行，但我认为最好使用作为徽标，因为它是您网站内容的重要组成部分。
WebDevRun，如果我在媒体查询中使用后台解决方案，我是否会杀死 header-functions 文件中的代码？如何使它与该文件一起使用？

【解决方案2】：

Here 是对使用 img 而不是使用背景图像的媒体查询的快速标记。我使用了 div 而不是图像，但这是相同的概念。如果您最小化浏览器，您将看到文本更改。

【讨论】：