HTML5 レスポンシブデザイン『Media Queries』の記述

ヘッド内に以下のメタの記述。

<meta name="viewpoint" content="width=device-width">
//for IE
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

各サイズのCSSを記述するとき。

/* タブレット向けのスタイル：481px 〜 768px */
@media only screen and (min-width: 481px){
//ここにタブレット向けのスタイルシートを記入。
}
/*  PC向けのスタイル：769px〜960px */
@media only screen and (min-width: 769px) {
//ここにPC向けのスタイルシートを記入。
}

その他Media QueriesのCSS記述。

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display:block;
}
blockquote: before, blockquote: after,
q: before, q: after{
  content:'';
  content: none;
}
ins{
  background-color: #bbe3d7;
  color: #000;
  text-decoration: none;
}

mark{
  background: #bbed3d7;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del{
  text-decoration: line-through;
}
abbr[title],dfn[title]{
  border-bottom: 1px dotted;
  cursor: help;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}

hr {
  display:block;
  height:1px;
  border:0;   
  border-top:1px solid #CCCccc;
  margin:1em 0;
  padding:0;
}

input, select {
  vertical-align:middle;
}

/* clearfix */
.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }