Question

我有一个网站，我试图做出回应。所以我需要在850px以下隐藏锚点。代码看起来大致如下：

<a href="javascript:void(0);" class="sign-up-button" id="tryitnow"><img src="assets/images/tryitnow.png" alt="Try it Now!"></a>
<div id="are-you-a-visionary">
   Bla bla some paragraphs
</div>
<a href="javascript:void(0);" class="sign-up-button" id="tryitnow1"><img src="assets/images/tryitnow.png" alt="Try it Now!"></a>

我想要的是，默认显示FIRST锚点（#tryitnow），当屏幕低于850px时显示另一个（#tryitnow1）。

在CSS中反映出来：

div#container div#layout div#slot1 a#tryitnow {
  display: inline;
  position: absolute;
  top: 90px;
  right: 75px;
}
div#container div#layout div#slot1 a#tryitnow1 {
  display: none;
}

@media all and (max-width: 850px) {
    div#container div#layout div#slot1 a#tryitnow1 {
      display: inline;
      position: relative;
      margin-right:auto;    
      margin-left:5;    
    }
      div#container div#layout div#slot1 a#tryitnow {
      display: none
    }
 }

但是，无论屏幕大小如何，只有锚#tryitnow1始终可见。 #tryitnow总是隐藏起来。

为什么呢？能否请你帮忙？谢谢！

Answer 1

问题是，你的css选择器指向不正确...尝试以下方法：

div#container div#layout div#slot1 a#tryitnow {
  display: inline;
  position: absolute;
  top: 90px;
  right: 75px;
}
#tryitnow1 {
  display: none;
}

@media all and (max-width: 850px) {
    #tryitnow1 {
      display: inline;
      position: relative;
      margin-right:auto;    
      margin-left:5;    
    }
      #tryitnow {
      display: none
    }
 }

<a href="javascript:void(0);" class="sign-up-button" id="tryitnow"><img src="assets/images/tryitnow.png" alt="Try it Now!"></a>
<div id="are-you-a-visionary">
   Bla bla some paragraphs
</div>
<a href="javascript:void(0);" class="sign-up-button" id="tryitnow1"><img src="assets/images/tryitnow.png" alt="Try it Now!"></a>

Answer 2

尝试以下方法： Demo

 #tryitnow {
    display: inline;
    position: absolute;
    top: 90px;
    right: 75px;
     background-color:#ccc;
}
#tryitnow1 {
    display: none;
}
@media handheld, only screen and (max-width: 850px) {
#tryitnow1 {
        display: inline;
        position: relative;
        margin-right:auto;
        margin-left:5;
     background-color:red;
    }
     #tryitnow {
        display: none
    }
}

只使用所需的id / class，使用您之前在某个层次结构中所遵循的结构。

CSS display：none不使用媒体查询

2 个答案: