UTILS.
100% ブラウザ内で完結
@

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

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

このツールについて

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

よくある質問

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

その他のツール