Question

我有这段代码：

<h1 id="logo">
    <a class="brand" href="/cgi-bin/koha/opac-main.pl">                           
        CSU Library                            
    </a>
</h1>

当我的浏览器宽度为701px及以上时，我不希望看到它（编辑说明：该元素应该从我的HTML代码中删除）;否则，当浏览器宽度低于701px时，可以正常看到标签。

我有什么方法可以做到吗？我不知道从这段代码中去哪里。

@media only screen and (min-width: 701px){
    ....??
}

Answer 1

如果这是您正在构建的响应式网站，则可以在CSS中轻松实现。

@media (min-width: 700px) { 
   #logo {
       display: none;
    }
}

Answer 2

对于Modern browsers and IE9 and above，您可以使用media queries之类的

#logo {
    display: none;
}
@media (max-width: 701px) {
  #logo {
    display: block;
  }
}

Answer 3

试试这个为css

#logo { display : none; }
@media only screen and (min-width: 701px){
#logo { display : block; }
}

Answer 4

一种方法是使用媒体查询，另一种方法是使用jquery：

$(document).ready(function(){
    if($(window).width() > 701)
    {
       $("#logo").hide()
    }
    else
    {
       $("#logo").show()
    }
});

OR

$( window ).resize(function() {
    if($(window).width() > 701)
        $("#logo").hide()
    else
        $("#logo").show()
 });

Answer 5

根据提问者的评论......＆＃34;但它留下了一个空白，这不是我想要的。我希望它从我的HTML中完全删除。＆＃34;

是的，这是可能的，但您需要使用javascript。使用jQuery非常简单：

$("#logo").remove();

在运行时删除标记

5 个答案: