Material UI (MUI) ブレークポイント：値とデバイスカバレッジ

Material UIブレークポイントリファレンス

Material UI (MUI) はMaterial Designガイドラインに沿った5つのデフォルトブレークポイントを使用します。これらのブレークポイントはテーマシステムに統合され、レスポンシブ動作のためにMUIコンポーネント全体で使用されます。

デフォルトブレークポイント

ブレークポイント	最小幅	一般的なデバイス
xs	0px	スマートフォン（ポートレート）
sm	600px	スマートフォン（ランドスケープ）、小型タブレット
md	900px	タブレット
lg	1200px	ノートPC、デスクトップ
xl	1536px	大型デスクトップ

デバイスマッピング

• xs (0-599px)：ポートレートのすべてのスマートフォン — iPhone SE (320px)からiPhone 16 Pro Max (440px)、Samsung Galaxy (360px)、Pixel (412-448px)
• sm (600-899px)：ランドスケープのスマートフォン、iPad Miniポートレート (744px)、小型タブレット
• md (900-1199px)：iPadポートレート (820px)、iPad Pro 11" (834px)、Samsungタブレット、Chromebook
• lg (1200-1535px)：iPadランドスケープ (1133-1194px)、MacBook Air (1440px)、標準ノートPC
• xl (1536px+)：MacBook Pro 16" (1728px)、デスクトップモニター、4Kディスプレイ

MUI vs 他のフレームワーク

範囲	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のブレークポイントはBootstrapやTailwindより一般的に高く、MUIは他のフレームワークと比較してより広いビューポートを「medium」や「large」と見なしています。

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 />;
}

ブレークポイントのカスタマイズ

const theme = createTheme({
  breakpoints: {
    values: {
      xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536,
      // カスタム追加: tablet: 640
    },
  },
});