メディアクエリとは何かを紹介する

王林
リリース: 2020-10-21 17:46:51
転載
3149 人が閲覧しました

メディアクエリとは何かを紹介する

メディア クエリ学習の核心は何ですか?

(推奨チュートリアル: html ビデオ チュートリアル)

さまざまなデバイスでページの通常のプレビューを実現 [現在のデバイスを判断]

メディア タイプ

さまざまなデバイスをさまざまなタイプに分割します

all (すべてのデバイス)

print (印刷デバイス)

screen (コンピューター画面、タブレット、スマートフォン)

メディア機能

幅、高さなどのデバイスの特性を記述するために使用されます...

width Web ページの表示領域は、設定された幅と完全に同じです

height Webページ表示領域は設定された幅と完全に同じです Height

max-width / max-height Web ページの表示領域は設定された width

min-width / min- 以下ですwidth Web ページの表示領域は、設定された幅以上です

orientation :portrait (ポートレート モード) | Landscape (水平モード)

構文キーワード

目的は、デバイス検出のためにメディア タイプとメディア特性をリンクすることです

##また、複数のメディア機能をリンクできます。これは、

#メディア機能を除外しないことは、メディア機能を除外しないことと同等です。は省略可能です。

特定のメディア タイプのみを指定します。省略できます。

文法

概要構文

<link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)">
ログイン後にコピー
- 内嵌式语法
      @media only screen  and (max-width: 420px) {
      	body {
      		background-color: red;
      	}
      }
      
      备注: 多个条件联写
      @media only screen and (width: 320px) and (height: 568px) {}
ログイン後にコピー

関連推奨事項:

html チュートリアル

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

ソース:juejin.im
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート