メディアクエリを使用したリソースの条件付き読み込み方法

CSSメディアクエリを使用した条件付きスタイルシートの読み込み: メディアクエリを使用して、デバイスの画面幅や解像度などの条件を指定し、特定のスタイルシートを読み込むことができます。例えば、以下のようなコードを使用します:
```
<link rel="stylesheet" media="(max-width: 768px)" href="mobile.css">
<link rel="stylesheet" media="(min-width: 769px)" href="desktop.css">
```
上記の例では、ウィンドウの幅が768ピクセル以下の場合には mobile.css が読み込まれ、769ピクセル以上の場合には desktop.css が読み込まれます。
JavaScriptを使用した条件付きリソースの読み込み: JavaScriptを使用して、条件に応じてリソースを動的に読み込むことも可能です。以下は一般的な例です:
```
if (window.matchMedia("(max-width: 768px)").matches) {
 var script = document.createElement('script');
 script.src = 'mobile.js';
 document.head.appendChild(script);
} else {
 var script = document.createElement('script');
 script.src = 'desktop.js';
 document.head.appendChild(script);
}
```
上記の例では、ウィンドウの幅が768ピクセル以下の場合には mobile.js が読み込まれ、769ピクセル以上の場合には desktop.js が読み込まれます。
レスポンシブイメージの読み込み: メディアクエリを使用して、デバイスの画面幅に基づいて異なる画像を読み込むこともできます。以下は例です:
```
<picture>
 <source media="(max-width: 768px)" srcset="small.jpg">
 <source media="(min-width: 769px)" srcset="large.jpg">
 <img src="fallback.jpg" alt="Fallback Image">
</picture>
```
上記の例では、ウィンドウの幅が768ピクセル以下の場合には small.jpg が、769ピクセル以上の場合には large.jpg が読み込まれます。画像が読み込まれない場合には fallback.jpg が表示されます。

これらは、メディアクエリを使用してリソースを条件付きで読み込む一般的な方法の一部です。ウェブ開発において、デバイスの互換性やパフォーマンスを向上させるために、条件付きリソースの読み込みは重要なテクニックとなります。