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;
}

在pageshow或pagebeforeshow上，如果屏幕高度大于宽度（人像），请添加该类。

$(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');
  }
});

<强> Demo

Jquery Mobile - 网格断点

网格B（33/33/33）

1 个答案: