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 @mediaqueries.
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.
