メディアクエリー

メディアクエリーを利用すれば端末や表示領域の横幅に合わせてスタイルを個別に指定する事ができます。
このメディアクエリーにはCSSを使い分ける方法とCSS内に直接記述する方法がありますが、恐らくCSS内に記述した方が利用しやすいと思います。
また、「and」を挟んで複数の条件を組み合わせる事で、最小サイズ～最大サイズなどの限定した指定も可能です。
ただし、メディアクエリーはあくまでも各種デバイス用にスタイルを使い分けるもので、表示されなくてもデータは全て読み込まれます。
このため共通するスタイルを1つにまとめるなどして、できるだけCSSを肥大化させない工夫が必要になります。
メディアクエリとは

ビューエリア（表示領域のサイズ）：max-width（これ未満の表示に適用）、min-width（これ以上の表示に適用）
デバイスサイズ（端末のサイズ）：max-device-width（これ未満のデバイスに適用）、min-device-width（これ以上のデバイスに適用）

メディアクエリーのサイズ指定

メディアクエリーのサイズの設定方法です。
メディアクエリーでは全ての小型端末の画面サイズを設定する必要はなく、特定サイズ以下だとレイアウトが崩れるという際にCSSで再指定します。
つまりどのサイズで崩れるかというのが基準点になるので、レイアウトが崩れなければ分ける必要もありません。
大抵は多くても数種類程度までで十分だと思いますが、モバイル端末は横置きで利用する場合もあるので注意してください。

一般対応：全デバイス共通（サイズ指定無し）、モバイル用（950px以下）、スマホ用（500px以下）
全デバイス対応：PC用、タブレット用、スマホ用、各モバイル端末の横置き用
全画面サイズ（縦横含む）：320、360、375、412、414、480、568、600、640、667、732、736、768、800、900、960、980、1024、1280、1366、1920

個別にCSS指定

メディアクエリーを利用すれば端末や表示領域の横幅に合わせて使用するCSSを使い分ける事ができます。
これにより小型端末でサイトを表示した時だけ、レイアウトを変更すると言った事が可能になります。
デバイスに合わせてCSSを振り分ける「Media Queries」

ウィンドウサイズの指定

個別にCSS指定する場合のウィンドウサイズの指定方法です。

個別にスタイル指定

メディアクエリーはCSSを指定する以外にも、CSS内に直接記述する方法もあります。
これを使えばより細かな個別のスタイル指定が可能になります。
ただし、CSSは記述の順番が狂うとレイアウトに影響するものがあるので、このあたりには注意が必要です。
CSS3のMedia Queries（メディアクエリ）の使い方と実装例

ウィンドウサイズの指定

個別にスタイル指定する場合のウィンドウサイズの指定方法です。

@media screen and (max-width:この値未満に適用px) {スタイルを記述}
@media screen and (min-width:この値以上に適用px) {スタイルを記述}
@media screen and (max-width:この値未満に適用px) and (min-width:この値以上に適用) {スタイルを記述}