html - @media 查询和常规的 css 交互

Question

我有一个带有侧面板的页面，在我的页面上有一个 position:fixed。在 css 中，如果屏幕宽度低于 1580px(这是大多数屏幕)，则以下 @media 查询隐藏面板。

@media screen and (max-width:1580px) {
  .sideSection {
    display: none;
  }
}

我创建了一个隐藏的复选框和一个标签来单击，以在屏幕上显示面板，使用

<input type="checkbox" name="showSide" id="showSideSection"/>
<label for="showSideSection" id="sideSectionButton">Show Side Section</label>
<div class="sideSection">
[...]

在 CSS 中:

#showSideSection:checked + label + div {
  display: inline;
}

这在理论上是完美的，但由于@media 是动态的，它总是会隐藏侧面板。有没有办法让@media 查询检查#showSideSection 是否为:checked；或者有什么更好的整体方法让面板显示在宽度 > 1580 的屏幕上，并替换为一个按钮，当在宽度 < 1580 的屏幕上单击时会显示所述面板？

编辑:这是 sideSection 的 css:

.sideSection {
  position: fixed;
  right: 0;
  top: 180px;
  height:calc(100% - 180px);
  width: 230px;
  padding-top: 50px;
  padding-right: 20px;
  padding-left: 10px;
  background: #ededed;
  border-left: 5px solid #e33d3d;
}

Answer 1

这不能用纯 css 来实现，你最好的选择是创建另一个类来显示面板，然后使用 javascript 将这个类添加到边栏(如果复选框被选中)。

$('#checkbox').change(function(){
if(this.checked){
     $('#Section').addClass('checked');
}
else {
     //do something else
     $('#Section').removeClass('checked');
}
})

http://jsfiddle.net/9UQf8/22/