This sample watches the MapView's widthBreakpoint property and based on the view size, sets how the Legend widget displays in the view. For example, if the view is set to a very small size, i.e. xsmall, the Legend widget does not display. Rather, it shows the Expand widget.
// Breakpoints
reactiveUtils.watch(
() => view.widthBreakpoint,
(breakpoint) => {
switch (breakpoint) {
case "xsmall":
updateView(true);
break;
case "small":
case "medium":
case "large":
case "xlarge":
updateView(false);
break;
}
}
);
Listening for breakpoints is helpful as it removes the need for multiple @media queries.
In addition to listening to breakpoints, the sample also makes use of CSS view-size classes. If the view's width is less than small, the UI's zoom in and zoom out buttons do not display.
.esri-view-width-less-than-small .esri-zoom .esri-widget--button {
display: none;
}To test this application, open the sample and resize the window larger and smaller. You should notice that when you get to a mobile-specific view size the Legend widget disappears and is replaced with the Expand widget. In addition, the zoom in and zoom out buttons no longer display.