Question

我正在处理网站的媒体查询，而且我只停留在标题内的静态徽标图片上，但仅限于屏幕尺寸为min-width 960px时。

在这个尺寸之上我有一个交互式粒子徽标图像但是当屏幕缩小到移动尺寸时我只想在标题中添加一个徽标。问题是徽标根本没有显示。我怀疑它被固定在适当位置的导航栏隐藏起来。

这就是我目前的代码 -

<header>
        <div id="logo"> <img src="images/havoc_logo.png"> </div>
        <nav>
            <a href="#particle-slider">Home</a>
            <a href="#whatwedo">What we do</a>
            <a href="#whoweare">Who we are</a>
            <a href="#partners">Who we work with</a>
            <a href="#contact">Say hello</a>
            <a href="Blog">Blog</a>
        </nav>
</header>

styles.css /媒体查询

 #logo {

  width: auto;
  height: auto;
}

#logo img {

   width: 200px;
  height: 100px;
}

/* RWD for logo (particle-slider is id for interactive logo) */

@media screen and (max-width: 960px) {


    #particle-slider {
        display: none;
    }


}

@media screen and (min-width: 960px) {

    #logo img {

        display: none;
    } 


}

     @media screen and (max-width: 480px) {

    body {
    max-width: 500px;

}


  header {

    height: auto;

  }

  nav {

    text-align: center;
    padding-bottom: 10px;
    padding-top: 10px;

  }

  nav a {
    display: block;
    border-bottom: 0;


  } 


  #logo {

    height: auto;

  }

  #logo img {

    width: 200px;
    height: 100px;
  }

因此，当我将页面缩小到480px或更低时，除了导航栏之外，标题中没有任何内容显示。缩小页面时如何在标题中显示徽标图像？

Answer 1

我找到了这个Q＆amp; A here

的答案

基本上我的导航被固定在一个固定位置并覆盖徽标，因此我必须将position:fixed规则恢复为position:static

CSS - 媒体查询/ RWD，隐藏在固定导航后面的徽标图像文件

1 个答案: