jQuery：モバイルファーストの考え方 - Webデザインのこと、いろいろ

★メディアクエリを最初にモバイルサイズから制作し、タブレットサイズ、PCサイズ、と情報量を増やしていく方法

f:id:sankoblog:20160403233729p:plain

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>メディアクエリのモバイルファースト</title>
<link rel="stylesheet" href="0324_mobile_first.css"> 
</head>

<body>
<div id="container">
<div class="box" id="box1">box1</div>
<div class="box" id="box2">box2</div>
<div class="box" id="box3">box3</div>
<div class="box" id="box4">box4</div>
</div><!--.container-->
</body>
</html>

@charset "utf-8";
/* CSS Document */

/*モバイルファーストの場合
スマホサイズのレイアウト*/
body {
	background: #C96;
}
.box {
	width: 300px;
	height: 300px;
	background: #FFF;
	margin: 10px auto;
}

/*768px以上のときに適用*/
@media screen and (min-width:768px) {
body {
		background: #9F6;
}
#container {
	width: 620px;
	overflow: hidden;
	margin: 0 auto;
}
.box {
	margin: 5px;
	float: left;
}
}

/*960px以上のときに適用(PCサイズ)*/
@media screen and (min-width:960px) {
	body {
		background: #999;
	}
#container {
	width: 1240px;
}
}