CSS メディアクエリジェネレーター

CSS メディアクエリジェネレーター

正確なCSSを構築 @media ブレイクポイントおよび機能の組み合わせに対して、構文を覚える必要なく、クラシックおよびモダン範囲の構文を含む有効なブロックを自動生成します。フレームワークプリセットを選択し、クエリタイプを選び、必要な追加メディア機能をトグルします — そのツールは、有効なブロックを自動生成します。

使用方法

1. [表示モード]を選択してください フレームワークプリセット — Bootstrap 5、Tailwind CSS、Material Design、またはカスタム — そしてブレイクポイントの幅を選択します。
2. 選択してください クエリタイプ: 最小幅 (モバイルファースト)、最大幅 (デスクトップファースト)、または2つの幅の間の範囲。
3. 使用言語に合う 構文スタイル: クラシック min-width / max-width または新しいメディアクエリレベル4の範囲構文 (width >= ...).
4. 任意の 追加機能 をブレイクポイントと組み合わせて選択できます：方向、prefers-color-scheme、prefers-reduced-motion、ホバー、またはポインター。
5. をコピーするか、ダウンロードアイコンをクリックしてください。生成された @media 出力パネルからブロックを取得し、スタイルシートにドロップします。

機能

• フレームワークプリセット — Bootstrap 5、Tailwind CSS、およびMaterial Designのワンクリックブレイクポイント、および任意のピクセル値のカスタムモード。
• 3つのクエリモード — モバイルファースト min-width、デスクトップファースト max-width、または特定のデバイスクラスをターゲットとする正確な範囲クエリ。
• クラシックおよびモダン構文 — 伝統的な min-width/max-width ルールと、よりシンプルなメディアクエリレベル4の範囲構文 (width >= X).
• 複合メディア機能 — 任意の幅クエリの上に、方向、prefers-color-scheme、prefers-reduced-motion、ホバー機能、およびポインター精度をレイヤーします。
• リアルタイム更新 — 入力値を変更すると出力が再生成され、異なる組み合わせを即座にプレビューできます。
• コピー・ダウンロード — 1クリックでCSSを取得するか、プロジェクト用に .css ファイルとして保存します。