デザインカンプからのスマホ時retina対応コーディングの考え方・方法を教えてください

Question

前提・実現したいこと

パソコン用のデザインカンプと750pxで作成されたデザインカンプがあります。
この750pxのカンプはレティーナのために2倍のピクセルで作成されています。
この場合のレスポンシブ込みのコーディングの考え方を教えていただきたいです。

####疑問1
ブレイクポイントは750pxでいいか

####疑問2
文字サイズは単純にカンプの1/2でいいか

####疑問3
スマホ時はretina用の画像を設定したいが、画像のretina対応がよくわからない

・srcsetのwは、写真データそのものの横幅を指しているのか、それとも、、、？？
・sizes属性の書き方はどうするべきか(スマホ時にretina対応にしたい)

試したこと

####疑問1について
ブレイクポイントは750pxでいいか

現在はmax-width:750pxを設定

####疑問2について
文字サイズは単純にカンプの1/2でいいか
現在は画面幅750pxを基準にvwでフォントサイズを決めている
(750pxのとき30px、375pxのとき15pxになる)

####疑問3について
画像のretina対応がよくわからない

以下のコードを書いてみたが、適切に動きません。
<img
srcset="画像1 262w, 画像[e-mail] 557w”
sizes="(max-width: 750px) 100%, 100%” (親要素に幅指定済みのため100%)
src="画像1”
alt="説明”>

##作業環境
MacBook Air2014

Answer 1

MDNに、非常に丁寧に解説されている記事がありました。

• レスポンシブ画像

ちなみに現在は3倍Retinaのデバイスもあります。肉眼でパッと見てわかるかと言われたら微妙なので、2倍までの対応でも十分かもしれませんが。

Comments

[thyda.eiqau]

font-sizeはviewportの指定次第だったような記憶がありますが、基本的には15pxと指定したら、物理30ピクセルの領域に描画してくれます（2倍Retinaデバイスの場合）ので、物理幅に合わせて値を変更する必要はないです。