◆ Tools

メディアクエリ ブレイクポイント集

主要フレームワークのブレイクポイントを横断比較できるチートシートです。

最終更新: 2026年3月

フレームワーク別ブレイクポイント比較

名前 Bootstrap 5 Tailwind CSS MUI v5 Foundation
xs / default < 576px < 640px < 600px < 640px
sm ≥ 576px ≥ 640px ≥ 600px ≥ 640px
md ≥ 768px ≥ 768px ≥ 900px ≥ 1024px
lg ≥ 992px ≥ 1024px ≥ 1200px ≥ 1200px
xl ≥ 1200px ≥ 1280px ≥ 1536px ≥ 1440px
2xl / xxl ≥ 1400px ≥ 1536px — —

主要デバイス参考幅

デバイス 幅
iPhone SE 375px
iPhone 14 390px
iPhone 14 Pro Max 430px
iPad mini 768px
iPad Air 820px
iPad Pro 12.9" 1024px
MacBook Air 1280px
Full HD 1920px

CSSスニペット

Tailwind風カスタムプロパティ

:root {
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

モバイルファースト

/* sm */
@media (min-width: 640px) { }

/* md */
@media (min-width: 768px) { }

/* lg */
@media (min-width: 1024px) { }

/* xl */
@media (min-width: 1280px) { }

/* 2xl */
@media (min-width: 1536px) { }

デスクトップファースト

/* ~sm */
@media (max-width: 639px) { }

/* ~md */
@media (max-width: 767px) { }

/* ~lg */
@media (max-width: 1023px) { }

/* ~xl */
@media (max-width: 1279px) { }

範囲指定 / 新しいRange Syntax

/* 範囲指定（従来） */
@media (min-width: 768px) and (max-width: 1023px) { }

/* Range Syntax（モダンブラウザ対応） */
@media (width >= 768px) { }
@media (768px <= width < 1024px) { }