@microsoft/fast-foundation > MatchMediaStyleSheetBehavior > with

MatchMediaStyleSheetBehavior.with() method

Defines a function to construct MatchMediaStyleSheetBehaviors for a provided query.

Signature:

static with(query: MediaQueryList): (styles: ElementStyles) => MatchMediaStyleSheetBehavior;

Parameters

Parameter	Type	Description
query	MediaQueryList	The media query to operate from.

Returns:

(styles: ElementStyles) => MatchMediaStyleSheetBehavior

Example

import { css } from "@microsoft/fast-element";
import { MatchMediaStyleSheetBehavior } from "@microsoft/fast-foundation";

const landscapeBehavior = MatchMediaStyleSheetBehavior.with(
  window.matchMedia("(orientation: landscape)")
);
const styles = css`
  :host {
    width: 200px;
    height: 400px;
  }
`
.withBehaviors(landscapeBehavior(css`
  :host {
    width: 400px;
    height: 200px;
  }
`))