响应式jquery面板保持打开状态并在宽屏幕上隐藏菜单

Question

jquery演示页面会在宽屏幕上自动打开侧面板，并显示徽标图像而不是“打开面板”图标。它保持打开状态，并且在屏幕变小之前不会像面板一样。请参阅此处的页面：http://demos.jquerymobile.com/1.4.2/

我已尝试按照此处的说明在CSS中重新创建此内容：jquery mobile - forcing panel open on wider screens

但它不起作用。我已经浏览了JQM演示站点的js和css文件，但我没有看到它是如何实现的（或者要查找的内容）。我的页面元素上也有ui-responsive-panel，但是没有。如何实现这种响应效果？

Answer 1

jQuery演示页面通过CSS media queries实现了这种效果。

他们通过在CSS中包含类似的东西来工作：

@media (max-width: 600px) {
  .class1 {
    display: none;
  }
  .class2 {
    width: 200px;
  }
}

@media (max-width: 600px)内的任何样式只有在浏览器窗口低于600px时才会应用（如max-width: 600px所示）。

使用媒体查询，当浏览器窗口低于（或高于）一定大小时，您可以简单地为侧面板设置样式。

修改：您可以在@media搜索{{1}}，详细了解其实施情况。