Material UI (MUI) Breakpoints: Values and Device Coverage

Material UI Breakpoints Reference

Material UI (MUI) uses five default breakpoints aligned with Material Design guidelines. These breakpoints are integrated into the theme system and used throughout MUI components for responsive behavior.

Default Breakpoints

Breakpoint	Min Width	Typical Devices
xs	0px	Phones (portrait)
sm	600px	Phones (landscape), small tablets
md	900px	Tablets
lg	1200px	Laptops, desktops
xl	1536px	Large desktops

Device Mapping

• xs (0-599px): All phones in portrait — iPhone SE (320px) through iPhone 16 Pro Max (440px), Samsung Galaxy (360px), Pixel (412-448px)
• sm (600-899px): Phones in landscape (667-956px height becomes width), iPad Mini portrait (744px), small tablets
• md (900-1199px): iPad portrait (820px), iPad Pro 11" (834px), Samsung tablets, Chromebooks
• lg (1200-1535px): iPad landscape (1133-1194px), MacBook Air (1440px), standard laptops, Chromebooks
• xl (1536px+): MacBook Pro 16" (1728px), desktop monitors, 4K displays

MUI vs Other Frameworks

Range	MUI	Bootstrap	Tailwind
Small	sm: 600px	sm: 576px	sm: 640px
Medium	md: 900px	md: 768px	md: 768px
Large	lg: 1200px	lg: 992px	lg: 1024px
X-Large	xl: 1536px	xl: 1200px	xl: 1280px

MUI's breakpoints are generally higher than Bootstrap and Tailwind, meaning MUI considers wider viewports as "medium" and "large" compared to other frameworks.

Using Breakpoints in MUI

import { useTheme, useMediaQuery } from '@mui/material';

function Component() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  const isTablet = useMediaQuery(theme.breakpoints.between('sm', 'md'));

  return isMobile ? <MobileLayout /> : <DesktopLayout />;
}

Customizing Breakpoints

const theme = createTheme({
  breakpoints: {
    values: {
      xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536,
      // Add custom: tablet: 640
    },
  },
});