ビューポートメディアクエリジェネレーター
レスポンシブWebデザイン用のCSSメディアクエリを生成します。
メディアクエリ設定
メディアクエリ条件を設定します
条件 1
プリセット
一般的に使用されるメディアクエリパターンを選択します
生成されたCSS
@media screen and (max-width: 768px) {
/* Your CSS rules here */
}一般的なブレークポイント
モバイル：
max-width: 480pxタブレット：
481px - 768pxデスクトップ：
min-width: 1024px大型デスクトップ：
min-width: 1200pxメディアクエリガイド
主要なメディア機能
- • width/height：ビューポートの幅/高さ
- • min-width/max-width：最小/最大幅の条件
- • orientation：画面の向き（縦/横）
- • resolution：画面解像度（Retinaディスプレイなど）
- • hover：ホバー機能のサポート
- • pointer：ポインターの精度（タッチ/マウス）
使用のヒント
- • モバイルファーストアプローチ：min-widthを使用して小さな画面からデザインする
- • 論理演算子で複雑な条件を組み合わせる
- • 印刷用のスタイルを別途指定するにはprintメディアタイプを使用する
- • 高解像度ディスプレイのサポートにはresolutionを使用する