當屏幕尺寸小於特定尺寸時隱藏div元素

Question

當瀏覽器的寬度小於或等於1026px時，我想要隱藏div元素。這是可能的與CSS：@media only screen and (min-width: 1140px) {}如果這是不可能與CSS，有沒有其他的選擇？

額外信息： 當div元素被隱藏時，我不想要一個空白的白色空白。我想讓頁面流動，就像我從代碼中完全刪除div元素一樣。

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

HTML5文檔類型。

我用javascript將一個畫廊放入該div。


我希望它看起來像這樣當它大於1026px寬度：

我希望它看起來像這樣，當它小於1026px寬度：

Answer 1

你可以用CSS做到這一點：

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

我們使用max-width，因爲我們要破例默認CSS，當一個屏幕是比0126px更小。 min-width會使1026px寬度和更大的所有屏幕的CSS規則計數。

需要注意的是@media查詢不支持IE8及更低版本。

Answer 2

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

任何時候屏幕小於1026像素s的範圍內，{ }內的任何內容都將適用。

Some browsers don't support media queries.你可以避開這個使用JavaScript庫，例如Respond.JS

Answer 3

@media只有屏幕和（最小寬度：1140px）應該做他的工作， 向我們展示你的CSS文件

Answer 4

這應有助於：

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

768像素應該足夠，以及

Answer 5

我所知道的最簡單的方法是使用在onResize（）FUNC：

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

Here is a fiddle for it

Answer 6

我不知道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"; 
} 

Answer 7

你必須使用最大寬度，而不是最小寬度。

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

Answer 8

你只需要在CSS中使用媒體查詢來實現這一點。

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

不幸的是有些瀏覽器不支持@media（IE8看你和下面）。在這些情況下，您有幾個選項，但最常見的是Respond.js，它是用於最小/最大寬度CSS3 Media Queries的輕量級聚合填充。

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

這將允許您的響應式設計在IE的這些舊版本中起作用。
*reference

Answer 9

如果你正在使用bootstrap你可以使用隱藏sm（lg或md或xs），這取決於你想要什麼。然後你可以進入css文件並指定你希望顯示的百分比。在下面的示例中，它將隱藏在大屏幕上，中型和特大型屏幕上，但通過放置屏幕的一半顯示在小屏幕上。

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