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

Question

我有一個 div 元素，當瀏覽器的寬度小於或等於 1026px 時，我想隱藏它。 這可能與 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 ，因為當屏幕小於1026px 時，我們想對 CSS 做一個例外。 min-width將使所有 1026px 寬度和更大的屏幕的 CSS 規則計數。

需要記住的是，IE8 及更低版本不支持@media查詢。

Answer 2

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

只要屏幕寬度小於 1026 像素， { }內的任何內容都將適用。

某些瀏覽器不支持媒體查詢。 你可以使用像Respond.JS這樣的 javascript 庫來解決這個問題

Answer 3

如果您使用引導程序，您可以根據需要使用 hidden-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";
}

Answer 5

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

Answer 6

@media only screen and (min-width: 1140px)

應該做他的工作，向我們展示你的 css 文件

Answer 7

這應該有幫助：

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

768 px 也應該足夠了

Answer 8

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

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

Answer 9

我所知道的最簡單的方法是使用 onresize() 函數：

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

這是一個小提琴