レスポンシブWebデザイン基礎

viewportをお忘れなく

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

メディアクエリの使い方

body{
	background:#ccc;
}
@media only screen and (max-width: 1280px){
	body {
		background:#999;
	}
}
@media only screen and (max-width: 960px){
	body {
		background:#666;
	}
}

@media only screen and (max-width: 640px){
	body {
		background:#333;
	}
}

モバイルフレンドリーのポイント！

• 横スクロール出さない
• 文字が小さすぎない
• ボタンが押しやすい

おススメの手順「まずは横スクロールを無しにしましょう。」

1. ブレイクポイントを決める
2. 横のスクロールバーは20px程度で計算しておく
3. widthを「%」に切り替える
4. marginを再調整する「解らなくなったらとりえず margin:0;」
5. box-sizing:border-box;で「padding」と「border」は内側にする