CSS3 マルチメディア クエリの簡単な紹介 (コード例)

この記事の内容は、CSS3 マルチメディア クエリに関する簡単な紹介 (コード例) です。必要な方は参考にしていただければ幸いです。

CSS2 マルチメディア クエリ:

@media ルールが css2 に導入され、さまざまなメディア タイプ (モニター、ポータブル デバイス、テレビなど) に合わせてさまざまなスタイル ルールをカスタマイズできます。

CSS3 マルチメディア クエリ:

CSS3 マルチメディア クエリは、CSS2 マルチメディア タイプの概念をすべて継承し、検索デバイスのタイプを置き換え、設定に応じて CSS3 適応表示を行います。

マルチメディア クエリでは、ビューポートの幅と高さ、デバイスの幅と高さ、方向、解像度など、多くのことをチェックできます。

クエリ構文:

@media  not|only|all    mediatype and (expressions){
　　　　css-sode;
　　}

not: 特定の種類のデバイスを除外、only: 特定の種類のデバイスのみ、all: すべてのデバイス。

さまざまなメディアでさまざまなスタイル ファイルを使用できます:

<link rel="stylesheet" media=" mediatype and|only|all (expressions)" href="print.css"/>

メディア タイプ:

all すべてのメディア

print Printer

screenコンピューター、タブレット、携帯電話

音声スクリーン リーダー

メディア機能:

デバイスの幅/高さ:デバイス画面に表示される幅/高さ

高さ、 width: ページの表示領域の高さと幅

max-device-width/height: 画面の最大表示幅と高さ。

CSS3 マルチメディア クエリの例:

以上がCSS3 マルチメディア クエリの簡単な紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。