このmetaタグの「viewport」は「表示領域」を示します。
そして「width=device-width」は、「幅を、表示しているデバイスのサイズに合わせる」設定を行ってくれるようになります。

<meta name="viewport" content="width=device-width">

これにより、どのデバイスで見ても、サイトの見え方が統一されるようになります。

メディアクエリは、css3で登場した、サイトを表示する環境（メディアの種類や画面サイズ等）に応じて、適用するcssを切り替える機能です。
この機能を使用することで、PCでのcss、スマートフォンでのcss、タブレットでのcss…という風にcssを切り替えることができます。

css内でのメディアクエリの記述は以下のようになります。

@media all/*メディアタイプ*/ and/*論理演算子*/ (min-width: 768px)/*メディア特性*/ {
	...
}

メディアタイプ

メディアタイプは、端末のタイプを示します。
以下の4つから設定できます。

メディア特性

メディア特性とは、そのメディアの持つ設定や環境等を示します。
このメディア特性は括弧で囲む必要があります。

論理演算子

論理演算子は、2つのメディア条件を使ったりする等、より細かな設定を可能にしてくれます。
以下の4つから設定できます。

PCとモバイルを切り替えるメディアクエリの記述例

@media all and (min-width: 768px) {
	/* PCの場合の記述内容 */
}
@media only screen and (max-width: 767px) {
	/* モバイルの場合の記述内容 */
}

• ブレイクポイントを768pxとした場合の記述です。

linkタグ内でのメディアクエリの記述は以下のようになります。

<link rel="stylesheet" href="style.css" media="all(メディアタイプ) and(論理演算子) (min-width: 768px)(メディア特性)">

PC用とモバイル用で別々のcssを呼び出す際のメディアクエリの記述例

<link rel="stylesheet" href="pc.css" media="screen and (min-width:768px)"> <!-- PC用のcssの呼び出し -->
<link rel="stylesheet" href="sp.css" media="screen and (max-width:767px)"> <!-- モバイル用のcssの呼び出し -->

• ブレイクポイントを768pxとした場合の記述です。