Javascript 当屏幕大小小于特定大小时隐藏div元素

当浏览器的宽度小于或等于1026px时，我想隐藏一个div元素。这是否可以通过css实现：

@仅媒体屏幕和（最小宽度：1140px）{}

如果无法通过css实现，是否有其他选择

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

我隐藏的div是

HTML5 Doctype

我用javascript在那个分区中放置了一个图库。


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

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

每当屏幕宽度小于1026像素时，

{}

中的任何内容都将适用

---

您可以使用javascript库来解决这个问题，如

您可以使用CSS来实现这一点：

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

我们使用的是

max width

，因为当屏幕小于1026px时，我们想对CSS做一个例外。

minwidth

将使CSS规则适用于所有1026px及更大宽度的屏幕

需要记住的是，IE8及更低版本不支持

@media

查询。

@media-only屏幕和（最小宽度：1140px）

完成他的工作后，向我们展示你的css文件

这应该会有帮助：

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

---

if（screen.width我所知道的最简单的方法是使用onresize（）函数：

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

函数getBrowserSize（）{
var w，h；
if（typeof window.innerWidth！=“未定义”）
{
w=window.innerWidth；//其他浏览器
h=窗内高度；
} 
else if（typeof document.documentElement！=“未定义”和&typeof document.documentElement.clientWidth！=“未定义”和&document.documentElement.clientWidth！=0）
{
w=document.documentElement.clientWidth；//IE
h=document.documentElement.clientHeight；
}
否则{
w=document.body.clientWidth；//IE
h=document.body.clientHeight；
}
返回{'width'：w，'height'：h}；
}
if（parseInt（getBrowserSize（）.width）<1026）{
document.getElementById（“fadeshow1”）.style.display=“无”；
}

您必须使用最大宽度而不是最小宽度

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

@介质（最大宽度：1026px）{
#试验{
显示：无；
}
}
试验

您只需在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中运行。

如果您使用的是bootstrap，您可以只使用隐藏的sm（lg、md或xs）取决于你想要什么。然后你可以进入css文件并指定你想要它显示的百分比。在下面的示例中，它将隐藏在大屏幕、中屏幕和超小屏幕上，但在小屏幕上显示时只占屏幕的一半

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

你到底想要什么
 <代码>可见性：隐藏的使DIV不可见，但不能摆脱页面上占用的区域，因此OP在其站点的中间会有一个大的空白块。<代码>显示：没有使用< /代码>在CSS中更好地使用@媒体。JavaScript使这项任务变得更加复杂。我是新的Web应用程序，所以如果我错了，请纠正我。但是使用
==！
而不是
=！
不是更好吗？这个问题仍然有效吗？@VitorinoFernandes：我的答案仍在投票中，所以，是的。defualt的Bootstrap有一个css文件，其中包含了所有的@media屏幕大小，用于超小、中、大的设置。你所需要做的就是根据自己的需要调整它们。即使你是一个如果你没有使用引导程序，你可以复制并粘贴到你的css文件中。链接到文件->[link]（）这很有魅力！！！如果你有类，那么就使用
而不是
#
，按照css规则如下所示。@media-only屏幕和（最大宽度：1026px）{.fadeshow1{display:none；}
<!--[if lt IE 9]>
    <script src="respond.min.js"></script>
<![endif]-->

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