Breakpoints

The default react-md styles do not use media queries to change the styles depending on the viewport size. However, there is built-in support for determining the current app size using the following breakpoints:

phone - (max-width: 47.9375em) (about 767px)
tablet - (min-width: 48em) (about 788px)
tablet-only - (min-width: 48em and max-width: 64em) (about 788px to 1024px)
desktop - (min-width: 64.0625em) (about 1025px)
large-desktop - (min-width: 80em) (about 1280px)

Usage

These breakpoints can be leveraged in CSS files using media query mixins or in React components using the useAppSize hook.

The media query mixins are recommended if the goal is to reduce the total JS served to the client and dynamic rendering is not required. If different experiences are required between mobile and desktop, the useAppSize hook is recommended instead. The following mixins are provided:

Mixin	Media Query
`phone-media`	`@media screen and (max-width: ${$phone-max-width})`
`tablet-media`	`@media screen and (min-width: #{$tablet-min-width})`
`tablet-only-media`	`@media screen and (min-width: #{$tablet-min-width}) and (max-width: #{$tablet-max-width})`
`desktop-media`	`@media screen and (min-width: #{$desktop-min-width})`
`large-desktop-media`	`@media screen and (min-width: #{$large-desktop-min-width})`

Here's a quick example using the media query mixins:

@use "@react-md/core";

.example {
  width: 100%;

  @include core.phone-media {
    color: red;
  }

  @include core.tablet-media {
    width: 50%;
  }

  @include core.tablet-only-media {
    border: 1px solid red;
  }

  @include core.desktop-media {
    width: 40%;
  }

  @include core.large-desktop-media {
    width: 30%;
  }
}

.example {
  width: 100%;
}
@media screen and (max-width: 47.9375em) {
  .example {
    color: red;
  }
}
@media screen and (min-width: 48em) {
  .example {
    width: 50%;
  }
}
@media screen and (min-width: 48em) and (max-width: 64em) {
  .example {
    border: 1px solid red;
  }
}
@media screen and (min-width: 64.0625em) {
  .example {
    width: 40%;
  }
}
@media screen and (min-width: 80em) {
  .example {
    width: 30%;
  }
}

Configuration

The breakpoints can be configured by changing the following Sass variables:

@use "@react-md/core" with (
  $phone-max-width: 47.9375em !default,
  $tablet-min-width: 48em !default,
  $tablet-max-width: 64em !default,
  $desktop-min-width: 64.0625em !default,
  $large-desktop-min-width: 80em !default
);

If the Sass variables were updated, the MEDIA_QUERY_CONFIG needs to be updated to match using configureMediaQueries:

src/rmdConfig.tsx

 import { type ReactMDCoreConfiguration } from "@react-md/core/CoreProviders";
 import { configureIcons } from "@react-md/core/icon/config";
+import { configureMediaQueries } from "@react-md/core/media-queries/config";
 import ArrowDropDownIcon from "@react-md/material-icons/ArrowDropDownIcon";
 import ArrowUpwardIcon from "@react-md/material-icons/ArrowUpwardIcon";
 ...

 configureIcons({
   back: <KeyboardArrowLeftIcon />,
   clear: <ClearIcon />,
   close: <CloseIcon />,
   checkbox: <CheckBoxOutlineBlankIcon />,
   checkboxChecked: <CheckBoxIcon />,
   checkboxIndeterminate: <IndeterminateCheckBoxIcon />,
   dropdown: <ArrowDropDownIcon />,
   error: <ErrorOutlineIcon />,
   expander: <KeyboardArrowDownIcon />,
   forward: <KeyboardArrowRightIcon />,
   menu: <MenuIcon />,
   notification: <NotificationsIcon />,
   password: <RemoveRedEyeIcon />,
   radio: <RadioButtonUncheckedIcon />,
   radioChecked: <RadioButtonCheckedIcon />,
   remove: <CancelIcon />,
   selected: <CheckIcon />,
   sort: <ArrowUpwardIcon />,
   upload: <FileUploadIcon />,
 });

+configureMediaQueries({
+  phoneMaxWidth: "new_value",
+  tabletMinWidth: "new_value",
+  tabletMaxWidth: "new_value",
+  desktopMinWidth: "new_value",
+  desktopLargeMinWidth: "new_value",
+});
+
 export const rmdConfig: ReactMDCoreConfiguration = {
   ssr: true,
 };