レスポンシブ対応が標準となった今日、スタイルシートはデバイスサイズごとに分けて管理するのがおすすめです。
従来、一つのスタイルシート（styles.css）に対してレスポンシブ用のタグを記述するのが一般的とされてきました。
しかし、今日ではよりハイクオリティなデザインを実現するために多くのデザインタグを活用することが求められるようになり、その結果、１つのスタイルシート内で全てのデバイスサイズごとのスタイルを管理するとなると、非常に長いソースコードになってしまうようになりました。
より今日の需要にあった管理の方法として、デバイスサイズごとに１つずつスタイルシートを作成し、それを振り分ける方法が推奨されるようになりました。
ここでは、デバイスサイズごとのスタイルシートを振り分けて実現するレスポンシブ化の手順について紹介していきます。
スタイルシートの振り分け方法
スタイルシートをデバイスサイズごとに用意し、それを振り分けるには「Media Queries」を利用します。
「Media Queries」を用いたスタイルシート読み込み記述例
「Media Queries」の基本
通常のレスポンシブ対応において利用する「Media Queries」の属性は、「max-width」と「min-width」です。
「max-width」
指定したピクセル数よりも小さい場合に適用されます。
320px以下の場合に適用したい場合
「min-width」
指定したピクセル数よりも大きい場合に適用されます。
320px以上の場合に適用したい場合
サンプル
以下のスタイルシートを準備した場合の読み込みサンプルです。
- PC版スタイルシート（1024px〜）
- タブレット用（600px〜1023px）
- スマホ用（〜599px）
PC/タブレット/スマホでスタイルシートを振り分けるサンプル
