的 DEMO

Question

我希望JQM左侧面板使用80％的屏幕，最大宽度为440px，最小宽度为114px。

我使用以下脚本将面板的大小调整为80％，但由于translade3d值，我无法看到如何应用最小和最大宽度。

代码：

@left-panel-width: 80%;
@right-panel-width: 80%;

.ui-panel {
    width: @left-panel-width;
}

.ui-panel.ui-panel-position-right {
    width: @right-panel-width;
}

.ui-panel.ui-panel-closed {
    width: 0;
}

.ui-panel-position-left {
    left: -@left-panel-width;
}

.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
    -webkit-transform: translate3d(-@left-panel-width, 0, 0);
    -moz-transform: translate3d(-@left-panel-width, 0, 0);
    transform: translate3d(-@left-panel-width, 0, 0)
}

.ui-panel-position-right {
    right: -@right-panel-width
}

.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-right.ui-panel-display-push {
    -webkit-transform: translate3d(@right-panel-width, 0, 0);
    -moz-transform: translate3d(@right-panel-width, 0, 0);
    transform: translate3d(@right-panel-width, 0, 0)
}

Answer 1

好像你过于复杂（除非你没有指明你的所有要求）。给定一个小组：

<div data-role="panel" id="mypanel" data-display="overlay">
    I am a panel
</div><!-- /panel -->

只需添加此CSS：

#mypanel.ui-panel {
  width: 80%;
  max-width: 440px;
  min-width: 114px;
}

如何在JQuery Mobile面板上应用最大宽度

1 个答案:

的 DEMO