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 回答