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

Question

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

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

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

HTML5 Doctype.

我使用javascript将一个库放入该div.


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

当它小于1026px宽度时,我希望它看起来像这样:

Answer 1

你可以用CSS做到这一点:

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

我们正在使用max-width,因为当屏幕小于 1026px 时,我们想要对默认CSS进行例外处理. min-width将使所有屏幕的宽度为1026像素和更大的CSS规则计数.

需要记住的是IE8及更低版本不支持@media查询.

Answer 2

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

每当屏幕宽度小于1026像素时,内部的任何内容都{ }将适用.

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

Answer 3

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

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

Answer 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";
}