【CSS Modules】resolution型の使い方
resolution型の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
resolutionプロパティは、出力デバイスの物理的な解像度、すなわちピクセル密度に関する情報を取得するためのメディア特性を定義するプロパティです。このプロパティは、CSSのメディアクエリにおいて使用され、デバイスの画面や印刷媒体などの表示能力に応じて、異なるスタイルを適用する条件を記述するために利用されます。
具体的には、@mediaルール内で(resolution: ...)のように記述することで、デバイスが特定の解像度を持っているか、あるいはそれ以上/以下の解像度を持っているかを判定できます。値には、dpi（dots per inch）、dpcm（dots per centimeter）、dppx（dots per pixel unit）といった単位を指定します。例えば、(resolution: 192dpi)は、1インチあたり192ドットの解像度を持つデバイスにスタイルを適用する条件となります。
ウェブサイトやアプリケーションが様々なデバイスで適切に表示されるように、高解像度ディスプレイ（Retinaディスプレイなど）向けに高精細な画像を読み込んだり、低解像度デバイス向けにパフォーマンスを優先したスタイルを適用したりする際に、このresolutionプロパティが非常に役立ちます。開発者はresolutionプロパティを用いることで、ユーザーエクスペリエンスを向上させるためのレスポンシブデザインをより柔軟に実装することができます。
公式リファレンス: <resolution>
構文(syntax)
1@media screen and (min-resolution: 192dpi) { 2 /* ここに特定の解像度条件を満たすデバイス用のスタイルを記述 */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません