55

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

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

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

HTML5 文档类型。

我使用 javascript 将画廊放入该 div。


当它大于 1026px 宽度时，我希望它看起来像这样： http://i.stack.imgur.com/REBPi.png


当它小于 1026px 宽度时，我希望它看起来像这样： http://i.stack.imgur.com/XdiL4.png

4

9 回答 9

151

你可以用 CSS 做到这一点：

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

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

需要记住的是，@mediaIE8 及更低版本不支持查询。

于 2012-11-20T15:19:16.077 回答
22 
@media only screen and (max-width: 1026px) { 
  #fadeshow1 { 
    display: none; 
  } 
}

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

一些浏览器不支持媒体查询。您可以使用像Respond.JS这样的 javascript 库来解决这个问题

于 2012-11-20T15:19:14.247 回答
10

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

<div class="col-sm-12 hidden-lg hidden-md hidden-xs">what ever you want</div>
于 2017-03-29T11:06:52.693 回答
7

我不了解 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";
}
于 2012-11-20T15:27:18.573 回答
3

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

于 2014-12-16T14:26:27.377 回答
1 
@media only screen and (min-width: 1140px)

应该做他的工作，给我们看你的css文件

于 2012-11-20T15:19:30.067 回答
1

这应该有助于：

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

768 px 也应该足够了

于 2012-11-20T15:25:05.607 回答
1

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

<style>
    @media (max-width: 1026px) {
        #test {
            display: none;
        }
    }
</style>
<div id="test">
    <h1>Test</h1>
</div>
于 2014-12-15T15:31:41.937 回答
0

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

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

这是一个小提琴

于 2012-11-20T15:25:53.767 回答