レスポンシブデザインについて - 趣味サイトのためのCSS3講座

まず、「メディアクエリ」というものを読み込む準備として、viewport（表示領域）の指定をおこないます。次のmeta要素をhtmlの開始タグとheadの開始タグの間に書きます。

「メディアクエリ」とは指定した画面のサイズのときにのみ読み込まれるCSSを決めるもので、link要素を用いて、どの画面サイズのときにどのようにサイトを表示させるかを指定します。
たとえば、「min-width: 601px」とすると601pxより大きい場合にPC用のCSSが反映され、「max-width: 600px」とすると画面サイズが600pxより小さい場合にスマホ用のCSSが反映されます。min-widthが最小幅、max-widthが最大幅を表します。

パソコンの画面サイズは端末によって異なるため、PC用のCSSにおいてもレスポンシブ対応をする必要があります。
その方法が「コンテンツ幅」を指定する方法です。「コンテンツ幅」とはパソコンのモニターサイズに対するウェブサイトのコンテンツの「より適切な横幅サイズ」のことです。
たとえば、当サイトのコンテンツ幅は960pxに指定しており、パソコンのモニターサイズがどんなに大きくなってもサイト内のコンテンツの横幅は最大で960pxとなり、これ以上は大きくなりません。
指定方法はbody要素に「max-width: ◯px」を指定することで全コンテンツの幅を最大◯px（以下の例では960px）に、そして「margin: 0 auto」を指定してコンテンツ全体を中央に寄せ、「padding: 0 ◯vw」を指定して左右に最低◯vw（ここでは3vw）の余白を設けます。

スマホ表示になると、意図しない場所で文書が改行されて読みづらくなることがあります。
その場合は、次のようにスマホ表示のときのみ改行させたい場所にbrタグを記入し、そこにclassを付与してPCサイズでは反映されないようにします。PC表示用のCSSの該当classに「display: none」を記入することで、その部分は反映されなくなります。