レスポンシブデザインを実装する方法

元記事

レスポンシブWebデザインを実装するためのTips - WebTecNote

レスポンシブ実装 について - 2019現在考え得るブレイクポイントなど - Qiita

iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 - Qiita

事前確認をする内容

対応ブラウザ、端末
IE対応する/しない
最新ブラウザバージョンだけで良い/だめ
IE対応なら追加料金などもあり

要調整内容

デザインサイズ、モバイル、デスクトップ

ピクセル比で割り切れない数字を使用しない

4インチ端末、1800pxを超えるウィンドウサイズ、ぞれぞれで見られた時にどうするのかを確認する

命名規則を決めておく

フォントサイズはデザイン上での指定は必ずpx
ptではない (1.333...pt = 1px)

画像は、最低限等倍と2倍が必要
3倍以上は、少しでもぼやけさせたくないものを優先する
UIで使う画像はSVG
細かなアイコンはwebfont

実装

viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

css

<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

css の長さ

相対指定と絶対指定がある

相対指定：他の長さにしたがって長さを指定すること
絶対指定：物理的な固定の長さで指定すること

絶対指定の単位

px: モニターの画素、pixel を1とする単位。解像度によっては、1pxが端末の複数ピクセルに変わることがある

pt: 1/72 in = 1pt

cm: 96px/2.54 = 1cm

mm: 1/10 cm = 1mm

相対指定の単位

%: 親要素の幅または高さを基準とする単位

em: その要素のfont-size を基準とする単位。font-size プロパティ自身に使われた場合は、要素に継承されたfont の大きさを表す

rem: ルート要素 (html) のfont-size (大抵16px) を基準とする単位。ルート要素のfont-size で使うと初期値を表す

vw: viewport の初期値の包含ブロックにおける幅の1%と同じ

vh: viewport の初期値の包含ブロックにおける高さ1%と同じ

メディアクエリ

@media (max-width: 375px) and (orientation: landscape) { 
body { color: red; }
}

機能クエリ

@supports (backdrop-filter: none) {
 .content {
    backdrop-filter: blur(5px);
 }
}

変数

:root {
 --section-width: 10vw;
}

section {
 width: var(--section-width);
}

テキストの調整

font-sizeはremで設定
remはhtmlの文字サイズを基準とする、直近の親要素の影響を受けない

画像の調整

max-width

img, picture {
 max-width: 100%;
}

srcset

<img src="jo-600x338.jpg"
 alt=""
 width="600"
 height="338"
 class="alignnone size-large wp-image-3970"
 srcset="jo-600x338.jpg 600w, 
   jo-300x169.jpg 300w,
   jo.jpg 638w"
 sizes="(max-width: 600px) 100vw, 600px">

picture

<picture>
   <source srcset="/media/examples/surfer-240-200.jpg"
           media="(min-width: 800px)">
   <img src="/media/examples/painted-hand-298-332.jpg" />
</picture>

background-size: cover または contain

object-fit

レイアウト

リキッドレイアウトまたはフレキシブルレイアウトを使用

レイアウトモジュール

flexbox または css grid を使用

flexboxは単一行、gridは行と列が必要な時に使用

before padding か after padding で高さの相対指定をする
padding-top:56.25%＝16:9

便利ツール

Layoutit Grid — CSS Grids layouts made easy!

CSS3 Media Queries Generator

PxtoRem

画面サイズ

PC: 1366px, 1920px, 1280px

SP: 375px, 360px, 320px, 414px

iPhone width

320px:
iPhone3, 4, 5
6, 7, 8 (互換)
6Plus, 7Plus, 8Plus (互換)

375px:
6, 7, 8
X
X, XS (互換)
6Plus, 7Plus, 8Plus (拡大)

414px:
6Plus, 7Plus, 8Plus
XR
XS Max

768px:
iPad Mini 1-4 5世代
iPad 1-4
iPad Air 1-2
iPad Pro 9.7

810px:
iPad 7世代

834px:
iPad Pro 10.5
iPad Air 3世代
iPad Pro 11

1024px:
iPad Pro 12.9