web-dev-qa-db-ja.com

レスポンシブWebデザインの単一スタイルシートと複数スタイルシート

要するに：

レスポンシブWebデザインを行う場合、1つまたは複数のスタイルシートを使用する必要がありますか？

詳細：

レスポンシブデザイン では、CSSの主要なチャンクが1つある傾向があり、次に特定のブレークポイントに達したときにレイアウトを調整するために他のビットやピースを使用します。次の2つの方法のいずれかでコードを構造化できます。

単一のスタイルシート

/* Main CSS */

@media only screen and (min-width: 480px) { /* CSS */ }
@media only screen and (min-width: 640px) { /* CSS */ }
@media only screen and (min-width: 800px) { /* CSS */ }

複数のスタイルシート

<link rel="stylesheet" media="screen" href="main.css">
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="480.css">
<link rel="stylesheet" media="only screen and (min-width: 640px)" href="640.css">
<link rel="stylesheet" media="only screen and (min-width: 800px)" href="800.css">

1つのスタイルシートを使用するとHTTPリクエストの数が減るようですが、一部のクライアントでは使用されない可能性のあるコードを含む大きなファイルが作成されます。複数のスタイルシートを使用するとファイルサイズが小さくなりますが、HTTPリクエストが多くなります。

それぞれのアプローチをいつ選ぶべきですか？ HTTPリクエストの数とファイルサイズの賛否両論は実際にはどのように積み上げられますか？

cssmedia-queriesresponsive-design
39
Philip Morton

スタイルシートは、現在のメディアに関係なく、常にダウンロードされ、screen、print、または3D-glasses。

参照： なぜすべてのブラウザーがすべてのCSSファイルをダウンロードするのですか？それらがサポートしていないメディアタイプであっても

したがって、それを念頭に置いて、それらすべてを1つのスタイルシートに保持すると、httpリクエストが減少します。個別のスタイルシートは常により多くのリクエストを作成するため、利点はありません。

41
Wesley Murch