Using Media Queries in JS

With media queries, developers can ensure that a website looks good and is easy to use on all types of devices, from smartphones to tablets to desktop computers. By optimizing the layout and design for each device, users can enjoy a seamless browsing experience no matter where they are accessing the website from.

Media Queries are defined and used in CSS to transform your page based on user-set criteria. CSS might not be able to adapt your design perfectly, instead, you might consider using JavaScript. The traditional way of determining if a device meets the Media Query criteria would be to use DOM attributes like innerWidth. However, now you are able to use Media Queries in JavaScript using the window.matchMedia function.


The window.matchMedia function in JavaScript is used to check if a particular media query applies to the current device or browser window. It returns a MediaQueryList object that contains information about the media query, such as the media type, media features, and whether the query matches the current device or not. Using the addEventListener method you can listen for changes to the media query and execute different code based on the result.

window.matchMedia('(max-width: 600px)');
// MediaQueryList {media: '(max-width: 600px)', matches: false, onchange: null}

Listening for changes

The matchMedia function returns a MediaQueryList that defines the current state of the query. The MediaQueryList also has a onchange event that will fire once the media query has been met. Below is an example of it in use.

let mq = window.matchMedia('(max-width: 600px)');

mq.onchange = (e) => {

// MediaQueryListEvent {isTrusted: true, media: '(max-width: 600px)', matches: true, type: 'change', target: MediaQueryList, …}


Be the first to comment!

Read More

Node JS Express Server

Even though Node JS has a built in HTTP request handler using a web server framework can reduce the amount of code and increase the reliability of your site. There are many options to ...


PocketBase JS API

Unlock the full potential of PocketBase's JS SDK with this comprehensive guide covering everything you need to know to avoid confusion.

Installing Nginx on Ubuntu

NGINX (pronounced "engine x") is a free, open-source, high-performance HTTP server and reverse proxy. It is known for its high performance and low resource consumption, making it a popular choice for web servers and microservi...