2カラムをRWDにするー基礎編 - WEBサイト制作の勉強

以前制作した2カラムレイアウトのデータをレスポンシブ化します。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>２カラムをRWDにする</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header></header>
<nav></nav>
<div id="wrapper">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<footer></footer>
</div>
</body>
</html>

スタイルシート

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: none;
  vertical-align: bottom;
}


/* PCレイアウト */
body {
  background: #9CF;
}
#container {
  width: 980px;
  margin: 0 auto;
  padding: 10px;
  background: #FFF;
}
header {
  height: 300px;
  background: #99F;
  margin-bottom: 10px;
}
nav {
  height: 50px;
  background: #666;
  margin-bottom: 10px;
}
#wrapper {
  overflow: hidden;
  margin-bottom: 10px;
}
#content {
  width: 700px;
  height: 400px;
  background-color: #F6C;
  float: right;
}
#sidebar {
  width: 270px;
  height: 400px;
  background-color: #3F9;
  float: left;
}
footer {
  height: 50px;
  background-color: #F93;
}

@media screen and (max-width:999px) {
 /* Mサイズのレイアウト*/
#container {
  width: 98%;
  padding: 1%;
}
header {
  margin-bottom: 1%;
}
nav {
  margin-bottom: 1%;
}
#wrapper {
  margin-bottom: 1%;
}
#content {
	width: 70%;
}
#sidebar {
	width: 29%;
}
}
@media screen and (max-width:767px) {
#content {
  float: none;
  width: 100%;
  margin-bottom: 1%;
}
#sidebar {
  float: none;
  width: 100%;
}
}