在移动设备和桌面上显示不同的徽标？ [英] Display a different logo on mobile and desktop?

问题描述

我正在更换手机上标题上的徽标。这是来自当前标题的代码，它显示在桌面和移动设备上（在桌面上，它是链接回主屏幕）。有没有简单的方法可以在移动版本上进行更改？

HTML：

 < div id =mainlogo> 
< a class =main logohref =http://sheisbiddy.com/home/title =主标识alt =主标识> 
< img src =http://sheisbiddy.com/wp-content/uploads/2016/01/SHEISBIDDY-main-logo-smaller-6.pngborder =0alt =/ > 
< / a> 
  

CSS：

  #mainlogo {text-align：center;} 
  

欣赏它们！您可以使用媒体查询并选择性地显示/隐藏元素。 您的html会在标记中包含两个徽标，您的CSS将根据屏幕大小定义显示哪个徽标。

例如：

 < style> 
 / *默认隐藏手机版* / 
 .logo .mobile {
 display：none; 
} 
 / *当屏幕宽度小于600px时
显示手机版和隐藏桌面* / 
 @media（max-width：600px）{
 .logo .mobile {
 display：block; 
} 
 .logo .desktop {
 display：none; 
} 
} 
< / style> 
 
< div class =logo> 
< img src =/ images / logo_desktop.pngclass =desktop/> 
< img src =/ images / logo_mobile.pngclass =mobile /> 
< / div> 
  

I'm looking to change the logo on my header on a mobile. This is the code from the current header that shows up on both the desktop and the mobile (on desktop it's the link back to the home screen). Is there any easy way of changing it on just the mobile version?

HTML:

<div id="mainlogo">
<a class="main logo" href="http://sheisbiddy.com/home/" title="Main Logo" alt="main logo">
<img src="http://sheisbiddy.com/wp-content/uploads/2016/01/SHEISBIDDY-main-logo-smaller-6.png" border="0" alt="" />
</a> 

CSS:

#mainlogo {text-align:center;}

Appreciate it guys!

解决方案

You can use a media query and selectively show/hide elements. Your html would have both logos in the markup, and your CSS would define which logo is shown depending on screen size.

For example:

<style>
  /* hide mobile version by default */
  .logo .mobile {
    display: none;
  }
  /* when screen is less than 600px wide
     show mobile version and hide desktop */
  @media (max-width: 600px) {
    .logo .mobile {
      display: block;
    }
    .logo .desktop {
      display: none;
    }
  }
</style>

<div class="logo">
  <img src="/images/logo_desktop.png" class="desktop" />
  <img src="/images/logo_mobile.png" class="mobile />
</div>

这篇关于在移动设备和桌面上显示不同的徽标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！