Read on how to do it in this tutorial: https://www.w3schools.com/howto/howto_js_media_queries.asp
Media queries was introduced in CSS3, and is one of the key ingredients for responsive web design. Media queries are used to determine the width and height of a viewport to make web pages look good on all devices (desktops, laptops, tablets, phones, etc).
The window.matchMedia() method returns a MediaQueryList object representing the results of the specified CSS media query string. The value of the matchMedia() method can be any of the media features of the CSS @media rule, like min-height, min-width, orientation, etc.
Try it yourself here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_matchmedia
Learn more about media queries in our CSS Media Queries Tutorial
Learn more about responsive design in our Responsive Web Design Tutorial