从移动视图切换到平板电脑视图时，如何将 jQuery 移动侧面板从推送更改为覆盖

Question

我目前正在从事 jQuery Mobile(JQM) 项目。我正在为这个项目使用 jquery.mobile-1.4.5。我正在尝试使用固定 header.

实现移动和平板电脑响应式侧边菜单面板

在移动视图中 => 面板宽度 = 100%

在平板电脑视图中 => 面板宽度 = 30%

我使用以下 @media 代码来实现。

@media all and (max-width: 35em) {
    .overlay{
        width: 100%
    }
  }
 
  @media all and (min-width: 45em) {
    .overlay{
        width: 30%
    }
  }

在运行 this code 之后固定 header 与菜单重叠

平板电脑视图

手机浏览

请帮我解决这个问题..或者如果有更好的解决方案来实现这个那就太好了

这是我期待的ui

移动视图

在平板电脑视图中

注意：请不要混淆后退按钮和关闭按钮。

谢谢并致以最诚挚的问候

Answer 1

您必须解决两个问题：切换面板 显示模式 并以百分比设置 panel 宽度。

panel有3种类型：overlay、reveal和push.参见此处：Panel - jQuery Mobile Demos。当面板小部件被隔离时，根据 显示模式 （或 data-display 属性）有不同的实现。

我相信你可以避免切换面板类型。您需要销毁并重新创建 面板小部件。相反，我建议您坚持使用面板 overlay 并使用媒体查询来调整面板宽度：伟大的 ezanker 已经在这里给出了答案： .

涉及很多 classes，因为在 JQM 内部 CSS 面板宽度固定硬编码为 17em。

您也可以尝试覆盖 ui-panel-wrapper class 并在平板电脑视图中将 margin-left 设置为 30%。

从移动视图切换到平板电脑视图时，如何将 jQuery 移动侧面板从推送更改为覆盖

How to change jQuery mobile side panel from push to overlay when switch from mobile view to tablet view

html

jquery

css

jquery-mobile

responsive