CSS はあまり知られていないメディア クエリを参照_html/css_WEB-ITnose

メディア クエリを使用すると、デバイスのさまざまな機能特性に基づいて、対応するスタイルを設定できます。

次のコードのような:

<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css"/>

は特定のスタイルシートを参照します。主にメディア属性を確認します。

まず、メディア クエリ式はメディア タイプ (ディスプレイですか?) を尋ね、次にメディアの特性 (ディスプレイは垂直方向ですか?) について尋ねます。縦向きに配置されたディスプレイ デバイスは

portrait-screen.css スタイル シートを読み込みますが、他のデバイスはそれを無視します。

メディア クエリの先頭に追加しないと、クエリのロジックが逆になります。

たとえば、

<link rel="stylesheet" media="not screen and (orientation:portrait)" href="portrait-screen.css"/>

は次のように使用することもできます。

ファイルをロードするにはビューポート幅が 800 ピクセルを超える表示デバイスのみを制限します

<link rel="stylesheet" media="not screen and (orientation:portrait) and (min-width:800px)" href="portrait-screen.css"/>

さらに深く拡張すると、カンマを使用して次のようにすることができますいずれか 1 つが満たされる限り、 OR 演算を表します。

もちろん、メディア クエリは CSS スタイル シートを参照するために使用されるだけでなく、スタイル シートに書き込むこともできます

@media screen and (max-device-width:400px){	h1{color:green}}@media screen and (max-device-width:960px){	h1{color:red}}

そして、さらにクレイジーな使用法は、現在のスタイルシート内の css スタイルシート 他のスタイルシートを参照します。たとえば、

@import url("phone.css") screen と (max-width:360px)

ただし、CSS の @import メソッドを使用すると、HTTP リクエストが増加する (読み込み速度に影響する) ことに注意してください。この方法は注意して使用してください。