UTILS.
プライバシーを標準に
@

CSS メディアクエリビルダー

プリセットでレスポンシブな @media クエリを作成してコピーできます。

ファイルはこの端末に残ります

ファイルはブラウザ内で処理され、アップロードされません。ツールの実行に必要なコードと素材はダウンロードされます。アカウントも追跡もありません。

ダウンロードを使うと、このツールを1つのHTMLファイルに保存してオフラインで使えます。

プライバシー →

このツールについて

min-width、max-width、または範囲に向きを加えてレスポンシブな @media クエリを構成し、ワンクリックのデバイスプリセットを使い、ラッパーをコピーできます。すべてブラウザ内で動作します。

よくある質問

min-width と max-width の違いは何ですか?
min-width はその幅以上でスタイルを適用し(モバイルファースト)、max-width はその幅以下で適用します。
デバイスプリセットはどのように機能しますか?
各プリセットは一般的なブレークポイントを入力します。モバイルは767pxまで、タブレットは768〜1023px、デスクトップは1024px以上で、その後に微調整できます。

その他のツール