レスポンシブデザイン

モバイルファースト

もう、スマホ向けデザインが基本で、パソコン向けは二の次と考える様に発想を切り替えました。
モバイルファーストにするとゴチャゴチャしたデザインになるのが防げる利点もあります。 CSSはモバイル用に書いて、デスクトップ用は二の次

モバイル用のCSS記述～
@media screen and (min-width: 600px) {
	デスクトップ用のCSS記述
}

コンテンツでブロック分け

デバイス毎にブロックの配置と幅を考えるだけのシンプルなところから始めています。
HTML記述はこのブロックを意識しますが、配置は考えない。
以前は表による配置も在りでしたが、レスポンスデザインの弊害になるので論外です。

viewportを指定

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

Tips:モバイルブラウザのビューポート
分かりづらいのは「width=device-width」です。
スマホの場合は可読に適した擬似的CSSピクセル数と読み替えるとわかりやすい。これは、最近のスマホ画面はデバイス解像度がパソコン並に高解像度(AppleはRetinaと呼ぶ)で、ドットピッチが非常に小さいのです。これにデバイスピクセル＝CSSピクセルで表示してしまうと、表示が小さくて可読困難です。そこで可読に適した擬似CSSピクセル数を小さく（表示を大きく）しています。
つまりスマホはデバイスピクセルにレンダリングする時に拡大レンダリングして疑似CSSピクセルに合わせます。スマホで見ると綺麗に見えるのは、この拡大レンダリングの為せる技です。

text-size-adjustの指定

Webkit系の古いブラウザ対応はもういいでしょ。

linkで別CSSファイルに書く

デバイス毎に別のCSSファイルとする方法

<link rel="stylesheet" href="style_smapho.css" media="screen and (max-width:480px)">
<link rel="stylesheet" href="style_tablet.css" media="screen and (min-width:481px) and (max-width:810px)">
<link rel="stylesheet" href="style_pc.css" media="screen and (min-width:811px) and (max-width:1024px)">
<link rel="stylesheet" href="style_wide.css" media="screen and (min-width:1021px)">
						

CSSの中に書く

スマホ向け,タブレット向け,パソコン向け,ワイド画面向けのCSSを併記する方法

/* スマホ向けCSS */
p {
	color: blue;
}
@media screen and (min-width:480px) and ( max-width:810px)  { 
    /*　タブレット向けCSS　*/
	p {
		color: yellow;
	}
}
@media screen and (min-width:810px) and ( max-width:1024px) {
    /*　パソコン向けCSS　*/
	p {
		color: red;
	}
}
@media screen and (min-width:1024px) {
    /*　ワイド画面向けCSS　*/
	p {
		color: fchsia;
	}
}
						

まだ書いていませんが、自分の中での再確認でいつの日か？

まだ書いていませんが、自分の中での再確認でいつの日か？

まだ書いていませんが、自分の中での再確認でいつの日か？

これはお勧めしませんが、手法としてのメモでまだ書いていませんが、自分の中での再確認でいつの日か？

まだ書いていませんが、自分の中での再確認でいつの日か？