屏幕尺寸小于特定尺寸时隐藏div元素 [英] Hide div element when screen size is smaller than a specific size

问题描述

我有一个div元素，当浏览器的宽度小于或等于1026px时，我想隐藏。这是可能的css： @media only屏幕和（min-width：1140px）{} 如果不可能css，有什么替代方法吗？

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

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

HTML5 Doctype。 >

我使用javascript将图库放入div。




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

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

解决方案

您可以使用CSS：

  @media only screen and（max-width：1026px）{
＃fadeshow1 {
 display：none; 
} 
} 
  

我们使用 max -width ，因为我们想对默认CSS进行一个例外，当屏幕比1026px小时。
min-width 会使所有宽度为1026像素或更大的所有屏幕的CSS规则计数。

要记住的是，@media查询不支持在IE8和更低。

I have a div element that I want to hide when the width of the browser is less than or equal to 1026px. Is this possible to do with the css: @media only screen and (min-width: 1140px) {} If it isn't possible with css, Is there any alternative?

Extra info: When the div element is hidden, I don't want a blank white gap. I'd like the page to flow as it would if I deleted the div element entirely from the code.

The div I am hiding is <div id="fadeshow1"></div>.

HTML5 Doctype.

I used javascript to place a gallery into that div.


I want it to look like this when it is bigger than 1026px width: http://i.stack.imgur.com/REBPi.png

I want it to look like this when it is less than 1026px width: http://i.stack.imgur.com/XdiL4.png

解决方案

You can do this with CSS:

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

We're using max-width, because we want to make an exception to the default CSS, when a screen is smaller than the 1026px. min-width would make the CSS rule count for all screens of 1026px width and larger.

Something to keep in mind is that @media queries are not supported on IE8 and lower.

这篇关于屏幕尺寸小于特定尺寸时隐藏div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！