使用 CSS 的响应式应用

此示例监视 MapView 的 widthBreakpoint 属性，并根据视图大小设置图例微件在视图中的显示方式。例如，如果视图设置为非常小的大小，即 xsmall，则不会显示图例微件。相反，它显示的是展开微件。

view.watch("widthBreakpoint", (breakpoint) => {
  switch (breakpoint) {
    case "xsmall":
      updateView(true);
      break;
    case "small":
    case "medium":
    case "large":
    case "xlarge":
      updateView(false);
      break;
    default:
  }
});

侦听间断点很有帮助，因为它消除了对@media 查询的需求。

除了侦听间断点之外，该示例还利用 CSS 视图大小类。如果视图的宽度小于较小，则不会显示 UI 的 zoom in 和 zoom out 按钮。

.geoscene-view-width-less-than-small .geoscene-zoom .geoscene-widget--button {
  display: none;
}

若要测试此应用程序，请打开示例并将调整窗口大小时。您应该注意到，当您达到特定于移动设备的视图大小时，图例微件将消失，并被替换为展开微件。此外，zoom in 和 zoom out 按钮不再显示。

responsive

Widget

breakpoints

widthBreakpoint

GeoScene API for JavaScript示例中心

使用 CSS 的响应式应用