メディアクエリ@mediaの使用
1635 ワード
メディアクエリ
参照先:https://developer.mozilla.org...1つのメディアクエリは、オプションのメディアタイプと、幅、高さ、色などのスタイルシートの範囲を制限する0つ以上のメディア機能を使用する式から構成されます.メディアクエリは、CSS 3から追加され、コンテンツ自体を変更することなく、コンテンツのレンダリングを特定の範囲の出力装置に対してトリミングすることを可能にする.
きほんしよう
具体的な使い方は
メディアクエリには、選択可能なメディアタイプと、CSS 3仕様を満たす条件の下で0つ以上の式が含まれ、これらの式はメディアの特徴を記述し、最終的にはtrueまたはfalseとして解析される.メディアクエリで指定するメディアタイプが、表示ドキュメントで使用するデバイスタイプと一致し、すべての式の値がtrueである場合、そのメディアクエリの結果はtrueとなる.メディアクエリ内のスタイルが有効になります.
構文ロジック
主な論理は以下の4つです. and ,[すなわちorの論理] not【クエリ結果を逆にする】 only【onlyオペレータは、メディアクエリのマッチングに成功した場合にのみ、選択したスタイルが古いブラウザに適用されないようにするために使用されます.】
メディアの特徴
ほとんどのメディアプロパティには、「最小...」を表すために「min-」または「max-」の接頭辞を付けることができます.あるいは「最高...」です.たとえば、max-width:12450 pxは、含まれるスタイルを適用する条件が最も高い幅12450 pxであり、12450 pxより大きい場合は条件を満たさず、このスタイルは適用されません.これにより、HTMLやXMLと競合する「」文字の使用が回避されます.メディアプロパティに値を指定せず、プロパティの実際の値がゼロでない場合、式は真に解析されます.カラーインデックス(color-index)アスペクト比(aspect-ratio)デバイスアスペクト比(device-aspect-ratio)デバイス高さ(device-height)デバイス幅(device-width)グリッド高さ(height)モノクロ方向(orientation)解像度スキャン(scan)幅(width)-moz-images-in-menus-moz-mac-graphite-theme-moz-maemo-classic-moz-device-pixel-ratio-moz-os-version-moz-scrollbar-end-backward-moz-scrollbar-end-forward-moz-scrollbar-start-backward-moz-scrollbar-start-forward-moz-scrollbar-thumb-proportional-moz-touch-enabled-moz-windows-classic-moz-windows-compositor-moz-windows-default-theme-moz-windows-theme
参照先:https://developer.mozilla.org...1つのメディアクエリは、オプションのメディアタイプと、幅、高さ、色などのスタイルシートの範囲を制限する0つ以上のメディア機能を使用する式から構成されます.メディアクエリは、CSS 3から追加され、コンテンツ自体を変更することなく、コンテンツのレンダリングを特定の範囲の出力装置に対してトリミングすることを可能にする.
きほんしよう
具体的な使い方は
メディアクエリには、選択可能なメディアタイプと、CSS 3仕様を満たす条件の下で0つ以上の式が含まれ、これらの式はメディアの特徴を記述し、最終的にはtrueまたはfalseとして解析される.メディアクエリで指定するメディアタイプが、表示ドキュメントで使用するデバイスタイプと一致し、すべての式の値がtrueである場合、そのメディアクエリの結果はtrueとなる.メディアクエリ内のスタイルが有効になります.
構文ロジック
主な論理は以下の4つです.
メディアの特徴
ほとんどのメディアプロパティには、「最小...」を表すために「min-」または「max-」の接頭辞を付けることができます.あるいは「最高...」です.たとえば、max-width:12450 pxは、含まれるスタイルを適用する条件が最も高い幅12450 pxであり、12450 pxより大きい場合は条件を満たさず、このスタイルは適用されません.これにより、HTMLやXMLと競合する「」文字の使用が回避されます.メディアプロパティに値を指定せず、プロパティの実際の値がゼロでない場合、式は真に解析されます.カラーインデックス(color-index)アスペクト比(aspect-ratio)デバイスアスペクト比(device-aspect-ratio)デバイス高さ(device-height)デバイス幅(device-width)グリッド高さ(height)モノクロ方向(orientation)解像度スキャン(scan)幅(width)-moz-images-in-menus-moz-mac-graphite-theme-moz-maemo-classic-moz-device-pixel-ratio-moz-os-version-moz-scrollbar-end-backward-moz-scrollbar-end-forward-moz-scrollbar-start-backward-moz-scrollbar-start-forward-moz-scrollbar-thumb-proportional-moz-touch-enabled-moz-windows-classic-moz-windows-compositor-moz-windows-default-theme-moz-windows-theme