メディアクエリーをHTMLに含めるための好ましい方法は何ですか？

Question

レスポンシブウェブデザインを念頭に置いてあなたのHTMLにCSSスタイルシートを含めるのが好ましい方法が何であるか疑問に思っていました。私が知る限り、複数のメディアクエリを含むCSSファイルを1つ使用する方法と、複数の別々のCSSファイルを使用して<link>タグのmedia属性に基づいて呼び出す方法の2通りがあります。例えば

、どちらか（CSSファイル内）：

@media screen and (max-width: 768px){ 
    ... 
    ... 
} 

または（HTMLファイル内）：

<link rel="stylesheet" media="screen and (max-width:768px)" href="style768.css" /> 

使用すると、1つのファイルの代わりに、複数のファイルを使用するどのようなケースでは、およびその逆？私はそれを行う "適切な"方法がないと思いますが、どちらの賛否両論がありますか？

Answer 1

これは意見の質問の一種だと思います。ただ1つのファイルを使用するという大きな利点は、1つのネットワーク要求だということです。しかし、メディアクエリを複数のファイルに分割し、リンク時にmedia属性を使用すると、ブラウザエージェントは、ロードするファイルをすべてロードするのではなく、ロードするかどうかを判断できます。前者の場合、リクエストは1つしかありませんが、コードがより多くロードされます。後者の場合、コードのロードは少なくなりますが、リクエストは2つです。どのようなメディアの特定のスタイルを含めるかに基づいて、いつ使用するかについてはより細かくできますが、個人的には、特にWebpackやGulpなどのツールでワークフローを使用しているときに、1つのファイルにバンドルするだけです。