【レスポンシブWebデザイン】高解像度ディスプレイ対応
高解像度ディスプレイ対応において
デバイスピクセルとは
端末自体が物理的にサポートするピクセルのこと
CSSピクセルとは
高解像度ディスプレイではデバイスピクセルとCSSピクセルの比率が２：１、
３：１となっている。そのため、適切な対応を行わないとぼやけてしまう。
高解像度ディスプレイにビットマップ画像を対応させる方法
- 実際の表示サイズより大きなサイズの画像を使用する
- JavaScriptのライブラリを使用し、ディスプレイのサイズや解像度によって表示する画像を切り替える
- CSSのメディアクエリを使用し、ディスプレイのサイズや解像度によって表示する画像を切り替える
- img要素にsrcset属性を指定し、ディスプレイのサイズや解像度によって表示する画像を切り替える
- picture要素内のsource要素のmedia属性を指定して、ディスプレイのサイズや解像度によって表示する画像を切り替える
