# Media Queries
Media Query matching and listeners.
# Manifest Declaration
You need to declare the use of this API in the manifest's features
member:
{"name": "system.mediaquery"}
# Module Import
Before using this service in a component, you need to import the module in the script section of the UX document.
import mediaquery from '@system.mediaquery'
Or
let mediaquery = require("@system.mediaquery")
# Methods
This service has the following method:
# matchMedia(string)
Method to create a media query.
# Arguments
This method have the following arguments:
condition
(string
). Mandatory attribute with the condition to match.
# Return
This method returns an object
with the following members:
matches
(boolean
). Read-only attribute that indicates if the system found data based on the current query condition (true
).media
(string
). Read-only attribute with the serialized media query condition.onchange
(function
). Listener for events that will be triggered once the matching data change.
Example:
const mql = mediaquery.matchMedia('(max-width: 600)');
You can also bind event listeners to this event with addListener(function)
.
For instance:
const mql = mediaquery.matchMedia('(max-width: 600)');
function screenTest(e) {
if (e.matches) {
// change element style
} else {
// change element style
}
}
mql.addListener(screenTest);
You can also remove the event listener with removeListener(function)
.
For instance:
mql.removeListener(screenTest);