CSSメディアクエリビルダー - レスポンシブブレークポイントジェネレーター

レスポンシブWebデザインのためのCSSメディアクエリをビジュアルに構築・生成

CSSツール

Tool

BreakpointQuery TypeMedia Type

CSS Rules

Generated CSS

@media screen and (min-width: 768px) {
  .container {
    padding: 1rem;
  }
}

Live Preview

Resize your browser to see the breakpoint at ≥ 768px

320px

480px

768px

1024px

1280px

Highlighted widths fall within the media query range.

使い方

CSSメディアクエリを使用すると、画面幅、高さ、向きなどのデバイス特性に基づいて異なるスタイルを適用できます。レスポンシブWebデザインの基礎となるものです。

一般的なブレークポイントには、320px（小型モバイル）、480px（モバイル）、768px（タブレット）、1024px（ラップトップ）、1280px（デスクトップ）があります。Tailwind CSSやBootstrapなどの人気フレームワークのブレークポイントも使用できます。

よくある質問