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

A string representing a serialized media query.

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

let mql = window.matchMedia("(max-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.

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

A simple <span> to receive the output.

• Media queries
• Using media queries from code
• window.matchMedia()
• MediaQueryList
• MediaQueryListEvent