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是动态的，它总是会隐藏侧面板。如果#showSideSection是:checked，有没有办法让@media查询检查;或任何更好的方式使面板在宽度> gt的屏幕上显示1580，并且用一个按钮代替，该按钮在点击宽度<1的屏幕上时显示所述面板。 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/

Answer 2

我感谢https://jsfiddle.net/xhe96kqr/2/，感谢Marcos Pérez Gude提供了我感谢的工作。不使用除css和@Media查询之外的任何内容：

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

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

@media查询和常规的css交互

2 个答案: