@media (resolution: ...)

メディアレゾリューション（メディアクエリ）

意味デバイスの解像度に一致する場合に適用

@media (resolution: ...)とは？

@media (resolution: ...)は、メディアクエリの一部で、デバイスの解像度の値に基づいて異なるスタイルを適用するために使用します。

@media (resolution: ...)の具体的な使い方

高解像度画像を適用する例

@media (resolution: 300dpi) {
    ...
}

解像度が300dpiのデバイスに対して、カッコ内のスタイルルールを適用します。

@media (resolution: ...)に関するよくある質問

Q. resolutionの単位は何がある？

A. resolutionの単位には主に3つあります：dpi（1インチあたりのドット数）、dpcm（1センチメートルあたりのドット数）、dppx（1ピクセルあたりのドット数）です。例：300dpi, 118dpcm, 2dppx

Q. どんな時に使うべき？

A. 主に高解像度デバイス向けの画像や詳細なスタイルを提供する際に使います。例えば、Retinaディスプレイなどの高解像度画面に対して、より高品質な画像を表示したい場合に使用します。

Q. 他のメディア特性と組み合わせられる？

A. はい、他のメディア特性と組み合わせることができます。例えば、@media (min-width: 768px) and (resolution: 2dppx) { ... } のように、画面幅と解像度の条件を組み合わせることが可能です。

@media (resolution: ...)が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの@media (resolution: ...)や@media (pointer: ...)、@media (max-aspect-ratio: ...)、@media print、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。