Question

构建电子商务网站

我已经将标题更改为黑色，并且有一个浅色徽标。在手机和平板电脑上查看时，我需要标题为白色（原生），徽标为黑色。

我未能利用媒体查询来实现这一目标。

主题有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

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

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

Answer 2

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

需要在移动和平板电脑设备中显示不同的徽标

2 个答案: