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

Posted 2023-03-06

【中文标题】当屏幕尺寸小于特定尺寸时隐藏 div 元素

【英文标题】：Hide div element when screen size is smaller than a specific size

【发布时间】：2012-11-08 16:49:30

【问题描述】：

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

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

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

html5 文档类型。

我使用 javascript 将画廊放入该 div。 我希望它在大于 1026px 宽度时看起来像这样：

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

【问题讨论】：

这个问题还有效吗？

@VitorinoFernandes：我的答案仍在获得投票，所以，是的。

【参考方案1】：

你可以用 CSS 做到这一点：

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

我们使用max-width，因为当屏幕小于 小于 1026 像素时，我们希望对 CSS 进行例外处理。 min-width 将使 CSS 规则适用于所有宽度为 1026 像素且更大的屏幕。

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

【讨论】：

这很有魅力！！！如果你有课，那么按照 CSS 规则使用 . 而不是 #，如下所示。 @media only screen and (max-width: 1026px) .fadeshow1 display: none;

【参考方案2】：

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

只要屏幕宽度小于 1026 像素， 内的任何内容都将适用。

Some browsers don't support media queries.你可以使用像Respond.JS这样的javascript库来解决这个问题

【参考方案3】：

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

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

【讨论】：

Bootstrap by defualt 有这个 css 文件，其中包含所有@media 屏幕尺寸，适用于超小型、小型、中型和大型设置，您需要做的就是根据您的需要调整它们。即使您不使用引导程序，您也可以复制并粘贴到您的 css 文件中。 文件链接-> [链接](drive.google.com/file/d/0B5X-yh_L2HHNZ2gyejdXTWRCc28/…)

【参考方案4】：

我不了解 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";

【讨论】：

在 css 中使用 @media 更容易。 Javascript 使这项任务更加复杂。

我是 Web 应用程序的新手，如果我错了，请纠正我，但使用 ==! 而不是 =! 不是更好吗？

【参考方案5】：

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

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

很遗憾有些浏览器不支持@media（看你IE8及以下）。在这些情况下，您有几个选择，但最常见的是 Respond.js，它是一个用于最小/最大宽度 CSS3 媒体查询的轻量级 polyfill。

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

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

【参考方案6】：

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

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

【参考方案7】：

这应该会有所帮助：

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

768 像素也应该足够了

【讨论】：

Visibility:hidden 使 div 不可见，但不会消除它在页面上占据的区域，因此 OP 在他的站点中间会有一个大的空白块。 Display: none更好

【参考方案8】：

@media only screen and (min-width: 1140px)

应该做他的工作，向我们展示你的 css 文件

【参考方案9】：

我知道的最简单的方法是使用 onresize() func：

   window.onresize = function(event) 
        ...
    

Here is a fiddle for it