Question

我正在使用bootstrap，我想显示一个或小于480px的div，但它应该在大于480px的所有屏幕尺寸上都不可见，如何通过媒体查询或其他任何方式完成技术。请帮我解决这个问题。

 @media screen and (max-width:768px) {
        #hidetop{
            display:none;
        }
        #showtop{display:block; }
        .reduce-margin
        {
        margin-top:0px; 


}
}

Answer 1

在主css中，为该div指定显示无

#hidetop{display: none;}

然后在responsive.css中使用以下代码

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

#hidetop{display: block;}

}

Answer 2

应该如下所示，添加到您的CSS中。途经：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

.div {
  display: none;
}
@media (max-width: 480px) {
  .div {
    display: inline;
  }
}

Answer 3

尝试以下代码希望对您有所帮助

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

这里是js小提琴

http://jsfiddle.net/xf6gA/19/

Answer 4

您也可以使用最小宽度。少了一条CSS规则。

@media (min-width: 480px) {
    #hidetop {
        display: none;
    }
}

here是学习媒体查询可以做的其他事情的好资源。您可以组合条件，并使用not运算符。您甚至可以检测设备何时处于横向模式！

使用引导程序删除所有大于480像素的屏幕上的div

4 个答案: