> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/utils/mediaquery.md).

# mediaQuery

A **simple yet powerful** `mediaQuery` function that allows you to **easily listen for media query changes** and execute callbacks when conditions are met.

```javascript
mediaQuery(query, callback);
```

```javascript
mediaQuery("(max-width:800px)", (matches) => {
  if (matches) {
    $("aside").setClass("slideIn animated");
  } else {
    $("aside").setClass("slideOut animated");
  }
})
```

**Detect Mobile View (e.g., max-width: 768px)**

```javascript
mediaQuery("(max-width: 768px)", (matches) => {
  if (matches) {
    console.log("Mobile view activated! 📱");
  } else {
    console.log("Switched to Desktop 🖥️");
  }
});
```

**Apply Styles Dynamically**

```javascript
mediaQuery("(min-width: 1024px)", (matches) => { 
  document.body.style.backgroundColor = matches ? "lightblue" : "white"; 
});
```

**Toggle Navigation Menu**

```javascript
mediaQuery("(max-width: 600px)", (isMobile) => { 
  document.getElementById("nav-menu").style.display = isMobile ? "none" : "block"; 
});
```

The `mediaQuery` function supports **any valid CSS media query**, no matter how complex. it can handle:

✅ **Basic queries:**

* `(max-width: 600px)`
* `(min-width: 768px) and (max-width: 1024px)`

✅ **Orientation:**

* `(orientation: portrait)`

✅ **Aspect ratio & resolution:**

* `(min-aspect-ratio: 16/9)`
* `(min-resolution: 300dpi)`

✅ **Multiple conditions with OR/AND:**

* `(max-width: 800px) and (orientation: landscape)`
* `(min-width: 1024px), (min-height: 768px)`