Firefox Tomorrow

web api instance property

MediaQueryList: media property

View on MDN ↗

The media read-only property of the MediaQueryList interface is a string representing a serialized media query.

Value

A string representing a serialized media query.

Examples

This example runs the media query (width <= 600px) and displays the value of the resulting MediaQueryList’s media property in a <span>.

JavaScript

let mql = window.matchMedia("(width <= 600px)");

document.querySelector(".mq-value").innerText = mql.media;

The JavaScript code passes the media query to match into matchMedia() to compile it, then sets the <span>’s innerText to the value of the result’s media property.

HTML

<span class="mq-value"></span>

A <span> to receive the output.

.mq-value {
  font:
    18px "Arial",
    sans-serif;
  font-weight: bold;
  color: #8888ff;
  padding: 0.4em;
  border: 1px solid #ddddee;
}

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also