jquery - Jquery Mobile - 网格断点

Question

我正在使用以下 jqm 网格，我希望每个网格在方向更改为纵向模式时堆叠在一起，我认为目前的断点是 45em。

我使用了以下语法，但是没有用，有什么建议吗？

//为 1200 像素宽度添加一个最小/最大类
$.mobile.addResolutionBreakpoints(1200);

//为 1200 和 1440 像素宽度添加最小/最大类
$.mobile.addResolutionBreakpoints([1200, 1440]);

网格：

网格 B (33/33/33)

A座 B座 C座

Answer 1

orientationchange您可以通过监听事件来实现这一点。

首先，创建一个将添加到块中的自定义类。

.blocks {
  width: 100% !important;
}

在pageshoworpagebeforeshow上，如果屏幕高度大于宽度（纵向），则添加该类。

$(document).on('pagebeforeshow', function () {
  if ($(this).height() > $(this).width()) {
    $('.ui-block-a, .ui-block-b, .ui-block-c').addClass('blocks');
  }
});

在orientationchange添加/删除该类。

$(window).on('orientationchange', function (e) {
  if (e.orientation == 'landscape') {
    $('.ui-block-a, .ui-block-b, .ui-block-c').removeClass('blocks');
  }
  if (e.orientation == 'portrait') {
    $('.ui-block-a, .ui-block-b, .ui-block-c').addClass('blocks');
  }
});

演示