メディアクエリジェネレーター 機能条件と事前設定されたブレイクポイントを持つCSSメディアクエリを生成します。

CSSメディアクエリは、@mediaルールを使用してスタイルを条件的に適用します。構文は@media [type] and (condition) { rules }です。メディアタイプには、画面、印刷、すべてがあります。メディア機能はデバイスの能力をテストします。min-width/max-widthはレスポンシブブレークポイントに使用され、orientationは横向き/縦向きに使用され、prefers-color-schemeはダークモード/ライトモードに使用され、prefers-reduced-motionはアニメーションの感度に使用され、hoverはホバーキャパビリティに使用され、pointerは入力精度に使用されます。複数の条件をandキーワードで組み合わせてすべての条件を満たすか、コンマ区切りで任意の条件を指定します。不 keywordはクエリを否定します。prefers-color-schemeやprefers-reduced-motionなどの最新機能により、ユーザーの好みに応じたプログレッシブな強化が可能になります。モバイルファーストアプローチでは、min-widthクエリを使用し、デスクトップファーストアプローチではmax-widthクエリを使用します。これらを組み合わせると、@media (min-width: 768px) and (max-width: 1023px)のような範囲クエリを作成できます。