需要手機和平板設備顯示不同的標誌

我使用這個主題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%;}

來源

2014-03-01 BPI

那你試過什麼樣的媒體查詢？ –

您是否使用移動偵測php腳本？如果是這樣，那麼你可以只給'$ logoimage'指定一個路徑值，通向你的手機版本 – Vector

@ Ralph，我試着創建2個logo類#logo和#mobilelogo，但不知道如何調用標題中的其他logo。 – BPI

Here是一個快速標記一下它看起來喜歡使用媒體查詢與IMG而不是使用一個背景圖像。我使用div而不是圖像，但它是相同的概念。如果您最小化瀏覽器，您將看到文本更改。

來源

2014-03-01 21:32:54 thesublimeobject

將徽標用作媒體查詢的背景。

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

來源

2014-03-01 20:43:49 WebDevRon

儘管此解決方案可行，但我認爲最好使用作爲徽標，因爲它是網站內容的重要組成部分。 – thesublimeobject

WebDevRun，如果我在媒體查詢中使用後臺解決方案，我會殺死頭文件函數文件中的代碼嗎？我如何使它與該文件一起工作？ – BPI

需要手機和平板設備顯示不同的標誌

回答

相關問題