如何將媒體查詢與JavaScript結合？

我在使用媒體查詢時遇到問題。我有一個網頁被分成三部分。根據屏幕分辨率或可用寬度，地區將顯示。例如，對於小於或等於1024的分辨率，僅顯示3個區域中的2個。在小於或等於480的分辨率下，只顯示3個區域中的1個。分辨率大於1024時，會顯示全部三個區域。每個部分可以再次展開和摺疊。如何將媒體查詢與JavaScript結合？

樣品演示可以在這裏http://jsfiddle.net/44QB3/

看到我寫了這個代碼

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Inventory details</title> 
     <style> 
     html, body { 
      height: 100%; 
     } 
     body { 
      margin: 0px; 
     } 
     .container { 
      padding-top: 50px; 
      position: relative; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box; 
      margin: 0px 10px; 
      height: 100%; 
     } 
     .leftPanel { 
      width: 34%; 
      height: 100%; 
      overflow: hidden; 
      margin-right: 20px; 
      float: left; 
      position: relative; 
     } 
     .centerPanel { 
      width: calc(33% - 20px); 
      width: -webkit-calc(33% - 20px); 
      width: -moz-calc(33% - 20px); 
      height: 100%; 
      overflow: hidden; 
      margin-right: 20px; 
      float: left; 
      position: relative; 
     } 
     .rightPanel { 
      width: calc(33% - 20px); 
      width: -webkit-calc(33% - 20px); 
      width: -moz-calc(33% - 20px); 
      height: 100%; 
      overflow: hidden; 
      position: relative; 
     } 
     .headerPanel-Style { 
      height: 25px; 
      padding: 5px 0px; 
      border-bottom: 1px solid #cfcece; 
     } 
     .bodyPanel-Style { 
      height: calc(100% - 36px); 
      height: -webkit-calc(100% - 36px); 
      height: -moz-calc(100% - 36px); 
      overflow-y: scroll; 
     } 
     .panel-Sidebar { 
      width: 20px; 
      height: 100%; 
      background: #cfcece; 
      position: absolute; 
      top: 0px; 
      left: 0px; 
      display: none; 
     } 
     .toggleButton { 
      width: 18px; 
      height: 18px; 
      border: 1px solid #cfcece; 
      background: white; 
      cursor: pointer; 
     } 
     @media screen and (max-width: 1024px) { 
      .leftPanel { 
       width: 60%; 
      } 
      .centerPanel { 
       margin-right: 10px; 
       width: calc(40% - 50px); 
       width: -webkit-calc(40% - 50px); 
       width: -moz-calc(40% - 50px); 
      } 
      .rightPanel { 
       width: 20px; 
      } 
      .rightPanel .panel-Header { 
       display: none; 
      } 
      .rightPanel .panel-Body { 
       display: none; 
      } 
      .rightPanel .panel-Sidebar { 
       display: block; 
      } 
     } 
     @media screen and (max-width: 480px) { 
      .leftPanel { 
       margin-right: 10px; 
       width: calc(100% - 60px); 
      } 
      .centerPanel { 
       width: 20px; 
      } 
      .centerPanel .panel-Header { 
       display: none; 
      } 
      .centerPanel .panel-Body { 
       display: none; 
      } 
      .centerPanel .panel-Sidebar { 
       display: block; 
      } 
     } 
     .leftPanel-Collapse { 
      width: 20px; 
     } 
     .leftPanel-Header-Collapse { 
      display: none; 
     } 
     .leftPanel-Body-Collapse { 
      display: none; 
     } 
     .leftPanel-Sidebar-Show { 
      display: block; 
     } 
     .centerPanel-Expand { 
      width: calc(100% - 60px); 
      width: -webkit-calc(100% - 60px); 
      width: -moz-calc(100% - 60px); 
     } 
     .centerPanel-Header-Expand { 
      display: block; 
     } 
     .centerPanel-Body-Expand { 
      display: block; 
     } 
     .centerPanel-Sidebar-Hide { 
      display: none; 
     } 
     </style> 
     <script type="text/javascript"> 
     <!-- 
     function init() { 
      var centerToggle = document.getElementsByClassName("centerPanel")[0].getElementsByClassName("panel-Sidebar")[0].getElementsByClassName("toggleButton")[0]; 
      centerToggle.addEventListener("click", function() { 
       var leftPanel = document.getElementsByClassName("leftPanel")[0]; 
       var leftPanelHeader = leftPanel.getElementsByClassName("panel-Header")[0]; 
       var leftPanelBody = leftPanel.getElementsByClassName("panel-Body")[0]; 
       var leftPanelSidebar = leftPanel.getElementsByClassName("panel-Sidebar")[0]; 
       leftPanel.setAttribute("class", leftPanel.getAttribute("class") + " leftPanel-Collapse"); 
       leftPanelHeader.setAttribute("class", leftPanelHeader.getAttribute("class") + " leftPanel-Header-Collapse"); 
       leftPanelBody.setAttribute("class", leftPanelBody.getAttribute("class") + " leftPanel-Body-Collapse"); 
       leftPanelSidebar.setAttribute("class", leftPanelSidebar.getAttribute("class") + " leftPanel-Sidebar-Show"); 

       var centerPanel = document.getElementsByClassName("centerPanel")[0]; 
       var centerPanelHeader = centerPanel.getElementsByClassName("panel-Header")[0]; 
       var centerPanelBody = centerPanel.getElementsByClassName("panel-Body")[0]; 
       var centerPanelSidebar = centerPanel.getElementsByClassName("panel-Sidebar")[0]; 
       centerPanel.setAttribute("class", centerPanel.getAttribute("class") + " centerPanel-Expand"); 
       centerPanelHeader.setAttribute("class", centerPanelHeader.getAttribute("class").replace("panel-Header", "") + " centerPanel-Header-Expand"); 
       centerPanelBody.setAttribute("class", centerPanelBody.getAttribute("class").replace("panel-Body", "") + " centerPanel-Body-Expand"); 
       centerPanelSidebar.setAttribute("class", centerPanelSidebar.getAttribute("class").replace("panel-Sidebar", "") + " centerPanel-Sidebar-Hide"); 
      }, false); 
     } 
     //--> 
     </script> 
    </head> 
    <body onload="init()"> 
     <div class="container"> 
      <div class="leftPanel"> 
       <div class="headerPanel-Style panel-Header"> 
        Left Panel 
       </div> 
       <div class="bodyPanel-Style panel-Body"> 
       </div> 
       <div class="panel-Sidebar"> 
        <div class="toggleButton"> 
        </div> 
       </div> 
      </div> 
      <div class="centerPanel"> 
       <div class="headerPanel-Style panel-Header"> 
        Center Panel 
       </div> 
       <div class="bodyPanel-Style panel-Body"> 
       </div> 
       <div class="panel-Sidebar"> 
        <div class="toggleButton"> 
        </div> 
       </div> 
      </div> 
      <div class="rightPanel"> 
       <div class="headerPanel-Style panel-Header"> 
        Right Panel 
       </div> 
       <div class="bodyPanel-Style panel-Body"> 
       </div> 
       <div class="panel-Sidebar"> 
        <div class="toggleButton"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

其工作正常，當我調整瀏覽器。但是，當我開始擴大和崩潰時，問題就來了。假設我倒塌了一個區域，說第一個區域，然後我開始將窗口擴大一點，比如1px到2px。現在面板以意想不到的方式行事。

我想實現的是在使用媒體隊列時展開摺疊面板。我不想使用jquery和類似的apis。他們被禁止使用。

來源

2014-01-13 Krishna Chaitanya

只是一個想法：你認爲你的用戶將調整他的瀏覽器？當我開發一個響應式網站時，我知道自己，我傾向於調整其大小以查看它是否有效，但我經常意識到我的用戶在使用我的網站時決不會調整瀏覽器的大小，或者他們確實會進入新頁面，糾正格式。我可以理解你想要解決這個問題，如果你正在開發一個應用程序，但否則我認爲這是微不足道的。 – Fred

@Fred這不是微不足道的，它很難向老闆/客戶解釋。如果老闆沒有按照預期調整大小和結果，那麼你可以想象會發生什麼。 – Anup

@Fred作爲用戶，我想調整窗口大小。事實上，即使現在我調整了我的瀏覽器。我總是這樣做。 –

爲什麼使用javascript ....下面的東西也解決了，不是嗎？

@media only screen 
     and (max-width : 1024px) { 
     .div_show_1024{ 
      display:block; 
      } 
     .div_hide_1024{ 
      display:none; 
      } 
     } 

    @media only screen 
     and (max-width : 480px) { 
     .div_show_480{ 
      display:block; 
      } 
     .div_hide_480{ 
      display:none; 
      } 
     }

現在你所要做的就是將這些類分配給各自的div！

來源

2014-01-13 09:13:17 NoobEditor

我不明白你想告訴你什麼。調整瀏覽器窗口大小時，我的代碼工作正常，放大和縮小。問題出現在我想要摺疊並展開瀏覽器的時候。 –

的想法是，使用'media-queries'做他們應該做的事情......你是什麼意思，通過崩潰和擴大瀏覽器** ?? – NoobEditor

糟糕！ Sory認爲是打字錯誤。擴展和摺疊面板時會出現問題。 –

var TO = false; 
    var resizeEvent = 'onorientationchange' in window ? 'orientationchange' : 'resize'; 
    $(window).bind(resizeEvent, function() { 
     TO && clearTimeout(TO); 
     TO = setTimeout(resizeBody, 200); 
    }); 
    function resizeBody(){ 
     var width = window.innerWidth || $(window).width(); 
     if(width<1024) 
//some statments here; 
    }

來源

2014-01-13 09:15:40 Moussawi7

如何將媒體查詢與JavaScript結合？

回答

相關問題