apphouse/dist/styles/mediaQueries.ts

Component library for React that uses observable state management and theme-able components.

import { MaxScreenSizeXS, MinScreenSizeS } from "./screenSizes";

export const MIN_MOBILE_WIDTH = MinScreenSizeS;
export const queries = {
  mobile: `@media (max-width: ${MaxScreenSizeXS}px)`,
  print: `@media print`,
  screen: `@media screen`,
  page: `@page`,
};

const SCREEN_ONLY = `only screen`;

function withMediaQuery(...tokens: (string | undefined)[]) {
  return `@media ${tokens.filter((t) => !!t).join(" and ")}`;
}

const breakpoints = {
  mobileSmall: 350,
  mobileMedium: 400,
  mobileLarge: 550,
  tablet: 950,
  desktop: 1450,
  wideDesktop: 1450,
};

type BreakPoint = keyof typeof breakpoints;

type DeviceOrientation = "portrait" | "landscape";

export const mediaQuery = {
  screen: ({
    biggerThan,
    smallerThan,
    orientation,
  }: {
    biggerThan?: BreakPoint;
    smallerThan?: BreakPoint;
    orientation?: DeviceOrientation;
  }) => {
    const subQueries = [
      SCREEN_ONLY,
      biggerThan && `(min-width: ${breakpoints[biggerThan]}px)`,
      smallerThan && `(max-width: ${breakpoints[smallerThan] - 1}px)`,
      orientation && `(orientation: ${orientation})`,
    ];
    return withMediaQuery(...subQueries);
  },
};

/**
 * Obtain media query for breakpoints
 */
export const getMediaQuery = {
  screen: ({
    biggerThan = 0,
    smallerThan = 0,
    orientation,
  }: {
    biggerThan?: number;
    smallerThan?: number;
    orientation?: DeviceOrientation;
  }) => {
    const subQueries = [
      SCREEN_ONLY,
      (biggerThan > 0 && `(min-width: ${biggerThan}px)`) || "",
      (smallerThan > 0 && `(max-width: ${smallerThan}px)`) || "",
      orientation && `(orientation: ${orientation})`,
    ];
    return biggerThan > 0 || smallerThan > 0 || orientation
      ? withMediaQuery(...subQueries)
      : "";
  },
};

// iPad Air 4 (2020)	1180 × 820	2360 × 1640	23:16	2×	10.9″	264 PPI
// iPad 10.2″ (2020)	1080 × 810	2160 × 1620	4:3	2×	10.2″	264 PPI
// iPhone 12 pro max (2020)	926 × 428	2778 × 1284	19.5:9	3×	6.7″	458 PPI
// iPhone 12 pro (2020)	844 × 390	2532 × 1170	19.5:9	3×	6.1″	466 PPI
// iPhone 12 (2020)	844 × 390	2532 × 1170	19.5:9	3×	6.1″	460 PPI
// iPhone 12 mini (2020)	780 × 360	2340 × 1080	19.5:9	3×	5.4″	476 PPI
// iPad Pro 11″ (2018-2020)	1194 × 834	2388 × 1668	4:3	2×	11″	264 PPI
// iPad Pro 12.9″ (2018-2020)	1366 × 1024	2732 × 2048	4:3	2×	12.9″	264 PPI
// iPhone 11 Pro Max (2019)	896 × 414	2688 × 1242	19.5:9	3×	6.5″	458 PPI
// iPhone 11 Pro (2019)	812 × 375	2436 × 1125	19.5:9	3×	5.8″	458 PPI
// iPhone 11 (2019)	812 × 375	1792 × 828	19.5:9	3×	6.1″	458 PPI
// iPad Air 3 (2019)	1112 × 834	2224 × 1668	4:3	2×	10.5″	264 PPI
// iPad 7 (2019)	1024 × 768	2160 × 1620	4:3	2×	10.2″	264 PPI
// iPad Mini 5 (2019)	1024 × 768	2048 × 1536	4:3	2×	7.9″	326 PPI
// iPhone XR (2018)	896 × 414	1792 × 828	19.5:9	3×	6.1″	326 PPI
// iPhone XS Max (2018)	896 × 414	2688 × 1242	19.5:9	3×	6.5″	458 PPI
// iPhone XS (2018)	812 × 375	2436 × 1125	19.5:9	3×	5.8″	458 PPI
// iPad 6 (2018)	1024 × 768	2048 × 1536	4:3	2×	9.7″	264 PPI
// iPad Pro 10.5″ (2017)	1112 × 834	2224 × 1668	4:3	2×	10.5″	264 PPI
// iPad Pro 12.9″ (2017)	1366 × 1024	2732 × 2048	4:3	2×	12.9″	264 PPI
// iPad Mini 4 (2015)