https://www.techmarcos.com/wp-content/themes/techmarcos/assets/js/modules/core/env.js

1/**
2 * Environment / viewport helpers and shared breakpoints.
3 *
4 * Single source of truth for the breakpoints used by JS-driven behaviour (some
5 * sliders/animations differ across the mobile boundary). Keep these in sync with
6 * the SCSS-less CSS breakpoints documented in assets/css.
7 *
8 * @module core/env
9 */
10
11/**
12 * Named breakpoints (px), min-width semantics to match Swiper's `breakpoints`.
13 * @type {Readonly<Record<string, number>>}
14 */
15export const BREAKPOINTS = Object.freeze({
16  xs: 351,
17  sm: 411,
18  md: 576,
19  lg: 768,
20  xl: 992,
21  xxl: 1200,
22});
23
24/**
25 * Whether the viewport is at least `min` px wide (matchMedia, so it reacts to
26 * zoom and is consistent with CSS media queries).
27 *
28 * @param {number} min Minimum width in px.
29 * @returns {boolean}
30 */
31export function isViewportAtLeast(min) {
32  return window.matchMedia(`(min-width: ${min}px)`).matches;
33}
34
35/**
36 * Whether the viewport is below `max` px wide.
37 *
38 * @param {number} max Exclusive upper bound in px.
39 * @returns {boolean}
40 */
41export function isViewportBelow(max) {
42  return !isViewportAtLeast(max);
43}
44
45/**
46 * Respect the user's reduced-motion preference before running decorative motion.
47 * @returns {boolean}
48 */
49export function prefersReducedMotion() {
50  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
51}