メディアクエリはcss3の新しい属性ですか?

メディア クエリは CSS3 の新機能で、ページのレスポンシブ デザインに使用できます。「@media」クエリを使用すると、さまざまなメディア タイプの失敗したスタイルを定義したり、サイズ スタイルはさまざまなスタイルを設定し、構文は「@media [メディア メディア] and|or (条件) and|or (条件){style}」です。

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

メディア クエリは css3 の新しい属性ですか?

1. メディア クエリは css3 の新機能で、ページのレスポンシブ デザインに使用できます。

2. さまざまな画面や解像度に合わせて、さまざまなスタイルの複数のセットをデザインできます。

メディア クエリ構文

@media [媒体介质] and|or (条件) and|or (条件){
//样式
.class{
}
}
//页面可见高度小于等于500px时，设置字体大小为10px
@media screen and(max-height:500px){
.class{
font-size:10px
}
}

@media クエリを使用すると、さまざまなメディア タイプにさまざまなスタイルを定義できます。

@media は、さまざまな画面サイズに応じてさまざまなスタイルを設定できます。特に応答性の高いページを設定する必要がある場合、@media は非常に便利です。

ブラウザのサイズをリセットすると、ブラウザの幅と高さに基づいてページも再レンダリングされます。

CSS 構文

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

not and and は、複雑なメディア クエリを共同で構築する場合にのみ使用できます。また、複数のメディア クエリをカンマで区切って 1 つのルールに結合することもできます。

not、and のみ、およびキーワードの意味:

• not: not 演算子はメディア クエリを否定するために使用されます。この条件が満たされない場合は true を返し、そうでない場合は true を返します。 false を返します。カンマ区切りのクエリのリストに存在する場合、適用される特定のクエリのみが無効になります。 not 演算子を使用する場合は、メディア タイプも指定する必要があります。

• only:only 演算子は、クエリ全体が一致する場合にのみスタイルを適用するために使用され、古いブラウザーが選択したスタイルを適用するのを防ぐのに役立ちます。 Only が使用されない場合、古いブラウザは単純に screen と (最大幅: 500px) を screen として解釈し、クエリの残りの部分を無視し、そのスタイルをすべての画面に適用します。唯一の演算子を使用する場合は、メディア タイプも指定する必要があります。

• , (カンマ) カンマは、複数のメディア クエリを 1 つのルールに結合するために使用されます。カンマ区切りリスト内の各クエリは、他のクエリとは別に処理されます。したがって、リスト内のいずれかのクエリが true の場合、メディア ステートメント全体が true を返します。つまり、リストは論理 or 演算子のように動作します。

• and: and 演算子は、複数のメディア クエリ ルールを 1 つのメディア クエリに結合するために使用されます。各クエリ ルールが true の場合、メディア クエリは true になります。また、メディアの結合にも使用されます。メディアタイプを使用した関数。

メディア タイプは、デバイスの一般的なカテゴリを表します。 not または Only 論理演算子が使用されない限り、メディア タイプはオプションであり、all タイプが (暗黙的に) 適用されます。

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

<!-- 宽度大于 900px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

(学習ビデオ共有: css ビデオ チュートリアル、html ビデオ チュートリアル)

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