小型モバイルデバイス (max-width: 480px)
max-width: 480pxで小型スマホをターゲット。最も狭いビューポート向けにコンパクトなレイアウトと大きなタップターゲットを適用。
Responsive Breakpoints
詳細な説明
小型モバイル画面のターゲット
モバイルファーストデザインではメディアクエリなしで始まりますが、非常に小さな画面（480px未満）には特別な対応が必要な場合があります。
クエリ
@media screen and (max-width: 480px) {
/* 小型スマホスタイル */
}
max-widthの使用タイミング
- コンポーネントが375px+では機能するが320pxで崩れる場合
- 非常に狭い画面でタップターゲットサイズを大きくする必要がある場合
- オーバーフローを防ぐためにフォントサイズやパディングを減らす必要がある場合
ユースケース
標準の375px+デバイスでは存在しないレイアウトの問題が最小のスマホ（約320px-480px）で見つかった場合にこのクエリを使用してください。