如何将媒体查询与 javascript 结合起来？答案

【问题标题】：How to combine media queries with javascript?如何将媒体查询与 javascript 结合起来？
【发布时间】：2014-01-13 17:15:40
【问题描述】：

我在使用媒体查询时遇到问题。我有一个网页，它被分成 3 个部分。根据屏幕分辨率或可用宽度，将显示区域。例如，在小于或等于 1024 的分辨率上，仅显示 3 个区域中的 2 个。在小于或等于 480 的分辨率下，仅显示 3 个区域中的 1 个。分辨率大于 1024，显示所有三个区域。每个部分都可以再次展开和折叠。

示例演示可以在这里查看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 和类似的 api。它们被禁止使用。

【问题讨论】：

只是一个想法：你认为你的用户会调整他的浏览器大小吗？当我开发一个响应式网站时，我了解自己，我倾向于调整大小以查看它是否有效，但我经常意识到我的用户在使用我的网站时永远不会调整浏览器的大小，或者当他们这样做时，他们会转到一个新页面，更正格式化。如果您正在开发应用程序，我可以理解您想要解决此问题，但否则我认为这是微不足道的。
@Fred 这不是小事，很难向老板/客户解释。如果 Boss 调整大小和结果不符合预期，那你可以想象会发生什么。
@Fred 作为用户，我想调整窗口大小。事实上，即使现在我也调整了浏览器的大小。我总是这样做。
@KrishnaChaitanya Now the panels behave in unexpected manner.你的意思是，第三个面板正在关闭吗？
我已经更新了你的小提琴。你能检查一下，那是你想要的吗？ jsfiddle.net/surjithctly/44QB3/1

标签： javascript html css responsive-design media-queries

【解决方案1】：

为什么要使用 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 ！！！

【讨论】：

我不明白你在说什么。在调整浏览器窗口大小、放大和缩小时，我的代码运行良好。当我想折叠和展开浏览器时，问题就来了。
想法是，使用media-queries 来完成他们应该做的事情...折叠和展开浏览器是什么意思？？
糟糕！抱歉，这是一个打字错误。展开和折叠面板时会出现问题。
对不起...我认为我无法解决您的 panel 问题，因为您的骗局在我看来还不错！ :(
设置小提琴结果面板以匹配手机的宽度。然后单击第二个面板的顶部。这将折叠第一个面板并展开第二个面板。现在开始扩大结果的宽度，然后你会看到问题。当我开始对其余面板实施折叠/展开时，也会出现同样的问题。

【解决方案2】：

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

【讨论】：