Question

当浏览器的宽度小于或等于1026px时，我想隐藏一个div元素。这可能与css有关： @media only screen and (min-width: 1140px) {} 如果css不可能，还有其他选择吗？

额外信息：当div元素被隐藏时，我不想要一个空白的空白。如果我完全从代码中删除div元素，我希望页面流动。

我隐藏的div是 <div id="fadeshow1"></div> 。

HTML5 Doctype。

我使用javascript将图库放入该div中。

当它大于1026px宽度时，我希望它看起来像这样：

我希望它在宽度小于1026像素时看起来像这样：

Answer 1

您可以使用CSS执行此操作：

@media only screen and (max-width: 1026px) {
    #fadeshow1 {
        display: none;
    }
}

我们正在使用max-width，因为当屏幕小于而不是1026px时，我们希望对默认CSS进行例外处理。 min-width会使所有宽度为1026像素的屏幕的CSS规则计数。

要记住的是IE8及更低版本不支持@media查询。

Answer 2

@media only screen and (max-width: 1026px) { 
  #fadeshow1 { 
    display: none; 
  } 
}

每当屏幕宽度小于1026像素时，{ }内的任何内容都将适用。

Some browsers don't support media queries.你可以使用像Respond.JS

这样的javascript库来解决这个问题

Answer 3

我不知道CSS，但这个Javascript代码应该可以工作：

    function getBrowserSize(){
       var w, h;

         if(typeof window.innerWidth != 'undefined')
         {
          w = window.innerWidth; //other browsers
          h = window.innerHeight;
         } 
         else if(typeof document.documentElement != 'undefined' && typeof      document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) 
         {
          w =  document.documentElement.clientWidth; //IE
          h = document.documentElement.clientHeight;
         }
         else{
          w = document.body.clientWidth; //IE
          h = document.body.clientHeight;
         }
       return {'width':w, 'height': h};
}

if(parseInt(getBrowserSize().width) < 1026){
 document.getElementById("fadeshow1").style.display = "none";
}

Answer 4

如果你使用bootstrap你可以根据你的需要使用hidden-sm（lg或md或xs）。然后你可以进入css文件并指定你希望它显示的百分比。在下面的示例中，它将隐藏在大屏幕，中等屏幕和超大屏幕上，但是通过占用屏幕的一半显示在小屏幕上。

<div class="col-sm-12 hidden-lg hidden-md hidden-xs">what ever you want</div>

Answer 5

您只需在CSS中使用媒体查询即可完成此操作。

@media (max-width: 1026px) {
    #fadeshow1 { display: none; }
}

不幸的是，某些浏览器不支持@media（在IE8及以下版本中查看）。在这些情况下，您有几个选项，但最常见的是Respond.js，它是用于最小/最大宽度CSS3媒体查询的轻量级填充。

<!--[if lt IE 9]>
    <script src="respond.min.js"></script>
<![endif]-->

这将允许您的响应式设计在旧版本的IE中运行。
*reference

Answer 6

这应该有所帮助：

if(screen.width<1026){//get the screen width
   //get element form document
   elem.style.display == 'none'//toggle visibility
}

768 px也应该足够了

Answer 7

@media only screen和（min-width：1140px）应该完成他的工作，告诉我们你的css文件

Answer 8

我所知道的最简单的方法是使用onresize（）func：

   window.onresize = function(event) {
        ...
    }

Here is a fiddle for it

Answer 9

您必须使用max-width而不是min-width。

<style>
    @media (max-width: 1026px) {
        #test {
            display: none;
        }
    }
</style>
<div id="test">
    <h1>Test</h1>
</div>

屏幕尺寸小于特定尺寸时隐藏div元素

9 个答案: