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

Question

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

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

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

HTML5文档类型。

我用javascript将一个画廊放入该div。


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

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

Answer 1

你可以用CSS做到这一点：

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

我们使用max-width，因为我们要破例默认CSS，当一个屏幕是比0126px更小。 min-width会使1026px宽度和更大的所有屏幕的CSS规则计数。

需要注意的是@media查询不支持IE8及更低版本。

Answer 2

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

任何时候屏幕小于1026像素s的范围内，{ }内的任何内容都将适用。

Some browsers don't support media queries.你可以避开这个使用JavaScript库，例如Respond.JS

Answer 3

@media只有屏幕和（最小宽度：1140px）应该做他的工作， 向我们展示你的CSS文件

Answer 4

这应有助于：

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

768像素应该足够，以及

Answer 5

我所知道的最简单的方法是使用在onResize（）FUNC：

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

Here is a fiddle for it

Answer 6

我不知道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 7

你必须使用最大宽度，而不是最小宽度。

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

Answer 8

你只需要在CSS中使用媒体查询来实现这一点。

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

不幸的是有些浏览器不支持@media（IE8看你和下面）。在这些情况下，您有几个选项，但最常见的是Respond.js，它是用于最小/最大宽度CSS3 Media Queries的轻量级聚合填充。

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

这将允许您的响应式设计在IE的这些旧版本中起作用。
*reference

Answer 9

如果你正在使用bootstrap你可以使用隐藏sm（lg或md或xs），这取决于你想要什么。然后你可以进入css文件并指定你希望显示的百分比。在下面的示例中，它将隐藏在大屏幕上，中型和特大型屏幕上，但通过放置屏幕的一半显示在小屏幕上。

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