CSS3のメディアクエリとは何ですか-CSSチュートリアル-php.cn

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

清浅

リリース： 2018-11-28 09:36:25

オリジナル

3100 人が閲覧しました

この記事では、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のメディアクエリとは何ですか

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

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