Skip to main content
Version: 1.x

@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

ParameterTypeDescription
queryMediaQueryListThe 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;
}
`))