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

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

(推奨チュートリアル: 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 サイトの他の関連記事を参照してください。