【CSS Modules】device-heightメディア機能の使い方

device-heightプロパティはCSS Modulesにおけるメディア特性の一つで、出力デバイスの画面全体の高さを、CSSピクセル単位で保持するプロパティです。このプロパティは、ウェブページのコンテンツが表示される領域であるビューポートの高さを示すheightプロパティとは異なり、デバイス自体の物理的な高さに基づいています。

主に、CSSのメディアクエリ内で使用され、特定のデバイスの高さに基づいて異なるスタイルを適用したい場合に利用されます。たとえば、特定のスマートフォンやタブレットなどのデバイスが持つ固定の高さを判別し、そのデバイスに最適化されたレイアウトやデザインを適用する際に役立ちます。

具体的には、@media screen and (device-height: 768px)のように記述することで、デバイスの高さが768ピクセルの場合にのみ適用されるスタイルルールを定義できます。また、min-device-heightやmax-device-heightといったプレフィックスを付けて、デバイスの高さが特定の範囲内にあるかどうかを条件とすることも可能です。これにより、例えば「デバイスの高さが最低800ピクセル以上の場合にこのスタイルを適用する」といった柔軟な指定が可能になります。

レスポンシブデザインでは、一般的にユーザーがウィンドウサイズを変更できる環境を考慮し、ビューポートのサイズ（widthやheight）に基づいてスタイルを調整することが推奨されます。しかし、device-heightは、特定の固定デバイス（例: スマートテレビやゲーム機など）向けに特化したデザインを提供する際に、より直接的な制御を可能にする強力なツールとなります。このプロパティを理解し活用することで、多様なデバイス環境に対応した堅牢なシステム構築に貢献できるでしょう。

Copy
1@media (min-device-height: 768px) {
2  body {
3    margin-top: 20px;
4  }
5}

引数なし

引数はありません

戻り値なし

戻り値はありません