CSS3のメディアクエリとは何ですか

この記事では、CSS3 のメディア クエリの概要を紹介します。これは一定の参考価値があり、皆さんの学習に役立つことを願っています。

レスポンシブ Web デザインは現在ますます人気が高まっていますが、レスポンシブ デザインには読み込みの遅さなど、レスポンシブ デザイン自体の問題もいくつかあります。しかし、この問題を非常にうまく解決する方法があり、メディア クエリ方法を使用して、さまざまなデバイスにスタイルを適応させる問題を解決できます。次に、それを記事で詳しく紹介します。

【おすすめコース: CSS3チュートリアル】

メディアクエリ

CSS3 のメディア クエリは、ユーザーのデバイスのサイズに応じてさまざまなスタイルを呼び出すことができます。これは、さまざまなコンテンツをさまざまなデバイスに提供するためのシンプルで効率的な方法であり、最も一般的に使用されるクエリは、ビューポートの高さと幅を処理するものです。

メディア クエリは次の目的で使用できます:

(1) CSS @media と at-rules を使用して条件付きでスタイルを適用します。

(2) 特定のメディアの 、 およびその他の HTML 要素。

(3) メディアのステータスをテストおよび監視するには、Window.matchMedia() メソッドと JavaScript メソッドを使用します。

メディア タイプ

all: すべてのデバイスで動作します。

print: ページ分割された資料および文書を印刷プレビュー モードで画面上に表示する場合。

screen: 主にスクリーンに適しています。

speech: 主に音声合成に適しています。

メディア関数

スペースの問題のため、ここではメディア クエリ関数の一部のみを紹介します。

#名前説明幅表示幅height視覚的な高さaspect-ratioビューポートのアスペクト比アスペクト比 orientationビューポートの方向 resolution出力デバイスのピクセル密度 低透明度を優先 透明度設定gridデバイスがグリッド画面を使用するかビットマップ画面を使用するか更新 出力デバイスがコンテンツの外観を変更する頻度overflow-block出力デバイスがエッジを処理します。ブロック軸のコンテンツがビューポートからオーバーフローします。overflow-inlineビューポートのコンテンツがインライン軸に沿ってオーバーフローできます。例:

and キーワードを使用して、メディア関数をメディア タイプまたは他のメディア関数と組み合わせることができます (幅のある横長のデバイスにスタイルを制限するなど)。少なくとも 30em の長さです

@media (min-width: 30em) and (orientation: landscape) { ... }

例:

<style>

    @media (max-width: 960px){
    body{
        background: pink;
    }
}
</style>

上の例は、ページが 960px より小さい場合、ページがピンク色に変わります。

max-width: 最大幅を表します。この幅より小さい場合、次の関数が呼び出されます。

Rendering

要約: 上記がこの記事の全内容です。この記事がメディアからの問い合わせについて皆さんにある程度の理解をしていただければ幸いです。

以上がCSS3のメディアクエリとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。