メディア クエリの適用と css3_html/css_WEB-ITnose の変更

CSS はメディアに関連付けられたスタイル シートの設定を常にサポートしてきました。さまざまなメディア タイプを表示するように調整できます。たとえば、ドキュメントは画面に表示されるときはサンセリフ フォントを使用し、印刷されるときはセリフ フォントを使用します。画面と印刷は 2 つの事前定義されたメディア タイプです。

HTML4ではメディアスタイルシートの書き方は

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"><link rel="stylesheet" type="text/css" media="print" href="serif.css">

CSS3ではメディアクエリはメディアタイプの機能を拡張したもので、今のところメディアクエリはメディアタイプといくつかの式で構成されています。式は、特定のメディア プロパティの条件を確認する役割を果たします。メディア クエリを使用すると、Web ページのコンテンツを変更することなく、ドキュメントの表示を特定の出力デバイスに適応させることができます。メディア クエリは、true または false に評価される論理式です。メディア クエリのメディア タイプがユーザー クライアントが配置されているデバイスのメディア タイプと一致し、メディア クエリのすべての式が true の場合、true を返します。 。

メディア クエリの例をいくつか示します。

<--!应用于支持指定特性（彩色）的特殊媒体类型（‘screen’）--><link rel="stylesheet" media="screen and (color)" href="example.css"><!--写在CSSd @import-rule语句中-->@import url(color.css) screen and (color);

すべてのメディア タイプに適用される短縮構文があり、キーワード all とそれに続く and は省略できます。

@media (orientation:portrain){...}@media  all and (orientation:portrain){...}

デザイナーと開発者は、このメソッドを使用して特別なニーズを満たす複雑なクエリを作成できます。

@media all and (max-width:698px) and (min-width:520px),(min-width:1150px){    body{    background:#ccc;}}

メディア クエリには次のような多くの機能があります。 - 高さ;

アスペクト比とデバイスのアスペクト比;

モノクロ (モノクロデバイスでない場合は 0 に等しい);

グリッド (出力デバイスがラスターかビットマップかを参照)。