ウィンドウの幅を変えてみてください
PCの場合は、ウィンドウの幅を変えてみてください。スマホ・タブレットの場合は、縦位置、横位置に持ち替えてください。
文字の色がグレー・ブルー、背景色がブルー・ピンクに変化します。
このページの外部CSSは、下記のように<link>で指定しています。
<head>
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" media="screen and (max-width:480px) and (orientation:landscape)" href="css/yoko.css">
<link rel="stylesheet" media="screen and (max-width:480px) and (orientation:portrait)" href="css/tate.css">
</head>
1つ目のCSSは全体のレイアウト。
→「default.css」を見る（クリックで別ウィンドウでCSSが開きます）
2つ目は「media属性」で「幅が480px以下」で「横長（landscape）」の条件下で「yoko.css」が適用されるようにしています。
「yoko.css」では文字色はグレーです。
→「yoko.css」を見る（クリックで別ウィンドウでCSSが開きます）
3行目は「幅480px以下」で「縦長（portrait）」の条件下で「tate.css」が適用されるようにしています。
「tate.css」で文字色をブルー・背景色はピンクに指定しています。
→「tate.css」を見る（クリックで別ウィンドウでCSSが開きます）