Question

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

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

欣赏它们！

Answer 1

您可以使用媒体查询并有选择地显示/隐藏元素。你的html在标记中会有两个徽标，你的CSS会根据屏幕大小定义显示哪个徽标。

例如：

<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>

Answer 2

您可以将两个图像放在<a>元素中，并使用CSS媒体查询显示/隐藏。例如......

HTML：

<div id="mainlogo">
  <a class="main logo" href="http://sheisbiddy.com/home/" title="Main Logo" alt="main logo">
    <img class="hidden-mobile" src="[source for desktop logo]" border="0" alt="" />
    <img class="hidden-desktop" src="[source for mobile logo]" border="0" alt="" />
  </a>
</div>

CSS：

@media all and (min-width: 768px) {
  .hidden-desktop {
    display: none !important;
  }
}

@media all and (max-width: 767px) {
  .hidden-mobile {
    display: none !important;
  }
}

如果这是一个你从头开始工作的项目，请考虑使用像Bootstrap这样的前端框架 - 有很多很棒的实用程序类来处理响应功能。

Answer 3

如果您只想使用CSS，可以使用CSS媒体查询来完成：

<强>标记

<div id="mainlogo">
    <a class="main logo" href="">
        <div class="logoImage"></div>
    </a>
</div>

CSS （mobile fisrt）

.logoImage{
    background-image: url( 'path/to/mobile/version/of/image.jpg' );
}

@media screen and (min-width:401px){
    .logoImage{
        background-image: url( 'path/to/desktop/version/of/image.jpg' );
    }
}

Answer 4

如果您使用的是Bootstrap，那么我仅通过使用几个Bootstrap类即可得到一个非常简单的解决方案：

    let containerView = UIView()

    let bg_clear = UIColor(hexString: "#34495E")
    containerView.backgroundColor = bg_clear


    containerView.layer.cornerRadius =  15
    containerView.clipsToBounds = false

    containerView.dropShadow() // Generate Shadow

    view.addSubview(containerView)

    containerView.translatesAutoresizingMaskIntoConstraints = false
    containerView.heightAnchor.constraint(equalToConstant: 50).isActive = true
    containerView.widthAnchor.constraint(equalToConstant: 300).isActive = true
    containerView.centerXAnchor.constraint(equalTo: tabBar.centerXAnchor).isActive = true

您可以在此处查看详细信息： https://getbootstrap.com/docs/4.0/utilities/display/

Answer 5

如果您使用的是引导程序，那么我有一种简单快捷的方法，使用2标签，使用类complex在移动设备中隐藏第一张图片并使用类"d-none d-sm-block"在桌面中隐藏第二张图像检查以下代码：

"d-block d-sm-none"

在手机和桌面上显示不同的徽标？

5 个答案: