39

要するに：

レスポンシブ 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 リクエストの数とファイル サイズの長所と短所は、実際にはどのように積み重なるのでしょうか?

4

1 に答える 1

41

スタイルシートは、現在のメディアが 、 、 のいずれであるかに関係なく、常にダウンロードされます。screenprint3D-glasses

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

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

于 2011-12-28T19:25:27.880 に答える