特定のサイズ（縦横固定）によって読み込むCSSを変えたい

前提

6パターンの異なる解像度によって、CSSを出し分けたいです。

デジタルサイネージ用のコンテンツを作っています。
表示させるサイネージディスプレイの解像度が下記の6パターンのみなので、計6種類のCSSを画面サイズ（縦横固定）に合わせて1種類ずつ読み込みたいです。
yoko1（1920x1080）
yoko2（1080x960）
yoko3（1080x640）
tate1（1080x1920）
tate2（960x1080）
tate3（640x1080）

横幅だけでなく縦幅にも合わせてレスポンシブ対応するにはどうしたらよいでしょうか。

実現したいこと

画面サイズが1920*1080のとき、yoko1のCSSを読み込む
画面サイズが1080*960のとき、yoko2のCSSを読み込む
画面サイズが1080*640のとき、yoko3のCSSを読み込む
画面サイズが1080*1920のとき、tate1のCSSを読み込む
画面サイズが960*1080のとき、tate2のCSSを読み込む
画面サイズが640*1080のとき、tate3のCSSを読み込む

発生している問題・エラーメッセージ

狙ったように特定のサイズでのCSS読み込みが上手くいかない
画面サイズを変えても一部のCSS（yoko1）しか読み込まれず、綺麗に表示されない

該当のソースコード

html
1<!-- ▼CSS 1 -->
2<link href="css/style_yoko1.css" rel="stylesheet" type="text/css" media="(max-width: 1920px) and (max-height: 1080px)" >
3<!-- ▼CSS 2 -->
4<link href="css/style_yoko2.css" rel="stylesheet" type="text/css" media="(max-width: 1080px) and (max-height: 960px)" >
5<!-- ▼CSS 3 -->
6<link href="css/style_yoko3.css" rel="stylesheet" type="text/css" media="(max-width: 1080px) and (max-height: 640px)" >
7<!-- ▼CSS 4 -->
8<link href="css/style_tate1.css" rel="stylesheet" type="text/css" media="(max-width: 1080px) and (max-height: 1920px)" >
9<!-- ▼CSS 5 -->
10<link href="css/style_tate2.css" rel="stylesheet" type="text/css" media="(max-width: 960px) and (max-height: 1080px)" >
11<!-- ▼CSS 6 -->
12<link href="css/style_tate3.css" rel="stylesheet" type="text/css" media="(max-width: 640px) and (max-height: 1080px)" >

試したこと

CSSの読み込み順を入れ替える
max-をmin-にしたり、max-,min-の記述を省く
縦長の画面サイズ（tate1〜tate3）には"and (orientation: portrait)"を追記

行動規範の内容に同意します

回答1件

私の環境では想定通りに動きました。
現在のあなたのCSSの設定は
画面の横幅が1920px以下かつ縦が1080px以下の場合はstyle_yoko1.cssを読み込む
画面の横幅が1080px以下かつ縦が960px以下の場合はstyle_yoko2.cssを読み込む
画面の横幅が1080px以下かつ縦が640px以下の場合はstyle_yoko3.cssを読み込む
画面の横幅が1080px以下かつ縦が1920px以下の場合はstyle_tate1.cssを読み込む
画面の横幅が960px以下かつ縦が1080px以下の場合はstyle_tate2.cssを読み込む
画面の横幅が640px以下かつ縦が1080px以下の場合はstyle_tate3.cssを読み込む
となっていますがあなたの希望通りでしょうか？
同時に条件を満たした場合は複数のCSSが読み込まれますので
横640px以下縦640px以下の場合は全てのCSSが読み込まれます。
特定の範囲でのみ読み込ませたいならmaxとminを組み合わせましょう

投稿2023/01/27 00:38

gogoweb_ikeda

総合スコア1426

ch-ki

2023/01/27 08:02

ご回答ありがとうございます。上記、ご認識の通りです。  <link href="css/style_yoko1.css" rel="stylesheet" type="text/css" media="(max-width: 1920px) and (min-width: 1920px) and (max-height: 1080px) and (min-height: 1080px)" >  <link href="css/style_tate1.css" rel="stylesheet" type="text/css" media="(max-width: 1080px) and (min-width: 1080px) and (max-height: 1920px) and (min-height: 1920px)" >  <link href="css/style_yoko2.css" rel="stylesheet" type="text/css" media="(max-width: 1080px) and (max-height: 960px)" >  <link href="css/style_yoko3.css" rel="stylesheet" type="text/css" media="(max-width: 1080px) and (max-height: 640px)" >  <link href="css/style_tate2.css" rel="stylesheet" type="text/css" media="(max-width: 960px) and (min-width: 960px) and (max-height: 1080px) and (min-height: 1080px)" >  <link href="css/style_tate3.css" rel="stylesheet" type="text/css" media="(max-width: 640px) and (min-width: 640px) and (max-height: 1080px) and (min-height: 1080px)" > ご回答拝見し、このように特定の範囲で指定してみて上から4つ目までは上手くいったのですが、下2つ（tate2、tate3）が読み込まれませんでした。。 max、minの数値は幅を持たせて試してみたりもしたのですが、どこか間違っている記述があるでしょうか？