如何将媒体查询与javascript相结合？
我在使用媒体查询时遇到问题。我有一个网页，它被分为三个部分。根据屏幕分辨率或可用宽度，将显示区域。例如，对于小于或等于1024的分辨率，仅显示3个区域中的2个。在小于或等于480的分辨率上，仅显示3个区域中的1个。分辨率大于1024时，将显示所有三个区域。每个零件都可以再次展开和折叠 示例演示可以在这里看到 我写了这段代码如何将媒体查询与javascript相结合？,javascript,html,css,responsive-design,media-queries,Javascript,Html,Css,Responsive Design,Media Queries,我在使用媒体查询时遇到问题。我有一个网页，它被分为三个部分。根据屏幕分辨率或可用宽度，将显示区域。例如，对于小于或等于1024的分辨率，仅显示3个区域中的2个。在小于或等于480的分辨率上，仅显示3个区域中的1个。分辨率大于1024时，将显示所有三个区域。每个零件都可以再次展开和折叠 示例演示可以在这里看到 我写了这段代码 <!DOCTYPE html> <html> <head> <title>Inventory deta
<!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>
我想要实现的是在使用媒体提问时扩展折叠面板。我不想使用jquery和类似的API。禁止使用 为什么要使用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 只是想一想：你认为你的用户会调整他的浏览器吗？我知道当我开发一个响应性强的网站时，我倾向于调整它的大小以查看它是否有效，但我经常意识到，我的用户在使用我的网站时永远不会调整浏览器的大小，或者当他们这样做时，他们会转到一个新页面，更正格式。我可以理解，如果你正在开发一个应用程序，你会想解决这个问题，但除此之外，我认为这是微不足道的。@Fred这不是微不足道的，很难向老板/客户解释。如果老板做了调整&结果不符合预期，那么你可以想象会发生什么。@Fred作为一个用户，我想调整我的窗口大小。事实上，即使现在我也调整了浏览器的大小。我总是这样做。@KrishnaChaitanya现在面板的行为出乎意料。你的意思是，第三个面板正在下降吗？我已经更新了你的小提琴。你能检查一下，这是你想要的吗？我不明白你想说什么。我的代码在调整浏览器窗口大小、放大和缩小时工作正常。当我想折叠和展开浏览器时，问题就来了。想法是，使用媒体查询来完成它们应该做的事情…你说的折叠和展开浏览器是什么意思？哎呀！对不起，那是打字错误。问题出现在展开和折叠面板时。对不起…我不认为我能解决你的面板问题，因为你的骗局在我看来很好！！：将“小提琴结果”面板设置为与手机的宽度相匹配。然后单击第二个面板的顶部。这将折叠第一个面板并展开第二个面板。现在开始扩展结果的宽度，然后您将看到问题。当我开始为其余面板实现折叠/扩展时，也会出现同样的问题。
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;
}