【问题标题】：How to apply max width on JQuery Mobile panel如何在 JQuery Mobile 面板上应用最大宽度
【发布时间】：2017-12-03 03:51:26
【问题描述】：

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

我使用以下脚本将面板大小调整为 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)
}

【问题讨论】：

标签： jquery css jquery-mobile frontend

【解决方案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;
}

DEMO

【讨论】：