mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-12 15:22:53 +01:00
53f0d6320e
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
40 lines
1.7 KiB
Markdown
40 lines
1.7 KiB
Markdown
---
|
|
title: Match Custom Media Query
|
|
hide_title: true
|
|
---
|
|
|
|
# Match Custom Media Query
|
|
|
|
This component is used to check for a custom media query. It is mostly used for one-off edge cases. For general media query usage it is recommended to use the **[Match Media Query](/library/prefabs/media-query/components/match-media-query)** component.
|
|
|
|
<div className="ndl-image-with-background xl">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
## Media Query
|
|
|
|
Here's a few examples of media queries:
|
|
|
|
- `(max-width: 375px)`. This will match if the screen size is `375px` or smaller, like on an iPhone 8, or iPhone X.
|
|
- `(max-width: 768px)`. Typical size to check for tablets.
|
|
- `(max-width: 1224px)`. Typical size to check for desktop and laptops.
|
|
|
|
You can also create more complex media queries that check for multiple sizes, or a range:
|
|
|
|
- `(min-device-width: 320px) and (max-device-height: 640px)`. This will match any size that's above `320px`, and no larger than `640px`.
|
|
|
|
## Inputs
|
|
|
|
| Data | Description |
|
|
| --------------------------------------------- | --------------------------------------------- |
|
|
| <span className="ndl-data">Media Query</span> | The **Media Query String** you want to detect |
|
|
|
|
## Outputs
|
|
|
|
| Signal | Description |
|
|
| -------------------------------------------- | ---------------------------------------------------------------------- |
|
|
| <span className="ndl-signal">Match</span> | Sends a signal if the **Media Query String** matches the device |
|
|
| <span className="ndl-signal">No Match</span> | Sends a signal if the **Media Query String** does not match the device |
|