Creates a signal that determines if a document matches a given media query. This uses window.matchMedia internally.

For a writable signal pass a string, otherwise a ReactiveSource that returns queries as a string.

An optional object that affects behavior of the signal.

// As a writable signal.
const $orientationQry = mediaQuerySignal('(orientation: portrait)');
effect(() => console.log(`browser is in ${$orientationQry().matches ? 'portrait' : 'landscape'} orientation`));
// from another signal.
const $querySource = signal(`(min-width: 992px)`);
const $widthQry = mediaQuerySignal($querySource);
effect(() => console.log(`browser is in ${$widthQry().matches ? 'large' : 'small'} screen`));