teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

ちょっと修正

2017/02/06 02:18

投稿

turbgraphics200
turbgraphics200

スコア4269

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
- うすることでdevicePixelRatioが1の場合は300.jpgをdevicePixelRatioが2の場合は600.jpgを同じ300x300のサイズで表示されます。この1x とか 2xという指定方法はdevicePixelRatioにほぼ直接基づいていますので少々問題となる場合があります。ですので、wという単位を用います。wという単位はCSSでのピクセルではなくデバイスのピクセルで設定しますので、devicePixelRatioに依存せずに画面サイズによって画像を選択し表示させることができます。
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
  ```