回答編集履歴
1
ちょっと修正
answer
CHANGED
@@ -13,7 +13,7 @@
|
|
13
13
|
```html
|
14
14
|
<img width="300" height="300" src="300.jpg" srcset="300.jpg 1x, 600.jpg 2x">
|
15
15
|
```
|
16
|
-
こ
|
16
|
+
これで、devicePixelRatio(以下DPR)が1の場合は300.jpgをDPRが2の場合は600.jpgを同じ300x300のサイズで表示されます。この1x とか 2xという指定方法はDPRにほぼ直接基づいていますので少々問題となる場合があります。ですので、wという単位を用います。wという単位はCSSでのピクセルではなくデバイスのピクセルで設定しますので、DPRに依存せずに画面サイズによって画像を選択し表示させることができます。
|
17
17
|
```html
|
18
18
|
<img width="300" height="300" src="300.jpg" srcset="300.jpg 600w, 600.jpg 800w">
|
19
19
|
```
|