メディアクエリの「画面」と「画面のみ」の違いは何ですか?

CSS では、メディア クエリはレスポンシブ Web デザインを作成する際に重要な役割を果たします。今日では、レスポンシブ デザインは、訪問者を引きつけるためにすべての Web サイトで必要となる重要なものの 1 つです。

一般に、@media CSS ルールを使用してメディア クエリを作成できます。ただし、メディア クエリでさまざまな条件とキーワードを使用して、さまざまなデバイスをターゲットにすることができます。たとえば、モバイル デバイス、デスクトップ デバイス、プリンタ スクリーンなど。

このチュートリアルでは、メディア クエリの「画面」と「画面のみ」の違いを学習します。

メディア評価中の画面とは何ですか?

CSS では、メディア クエリ内で「screen」キーワードを使用して、タブレット、モバイル、デスクトップ、プリンター、スクリーン リーダーなど、画面を備えたすべてのデバイスをターゲットにします。

＃＃＃構文＃＃＃

ユーザーは、以下の構文に従ってメディア クエリで screen キーワードを使用できます。

リーリー

上記の構文では、条件を使用してさまざまなデバイスのブレークポイントを設定します。

例 1

の中国語翻訳:

例 1

以下の例では、CSS のメディア クエリで screen キーワードを使用しています。 「text」クラス名を含む div 要素があります。

デスクトップでは本体の背景色が「水色」ですが、画面サイズが1200px未満の端末では「黄色」に変更させていただきます。また、1200 ピクセル未満のデバイスの div 要素のスタイルを変更します。

出力では、ユーザーはブラウザのウィンドウのサイズを変更し、スタイルの違いを確認できます。

リーリー

メディア蟥询中唯一の画面は何ですか?

CSS でメディアの書き込みを行う場合、「のみ」の関連文字と「画面」の関連文字を併用することもできます。時間使用メディアの例。

ただし、古いブラウザには「only」キーワードの特別な効果があります。たとえば、古いブラウザがメディア クエリとメディア機能をサポートしていないとします。その場合、デバイスがメディア タイプの仕様に一致しない場合は、メディア クエリ ブロック内で定義されたスタイルを適用すべきではありません。

ただし、最新のブラウザはすべて「only」キーワードを無視します。

＃＃＃構文＃＃＃

ユーザーは、以下の構文に従って、メディア クエリで「only」キーワードを使用できます。

リーリー

例 2

以下の例では、5 つの「単一」 div 要素を含む「複数」 div 要素を定義しました。 「複数」および「単一」の div 要素のスタイルを設定しました。

また、メディア クエリを使用して、幅が 680 ピクセル未満のデバイス向けに Web ページのスタイルを設定しました。ユーザーはブラウザのウィンドウのサイズを変更し、単一の div 要素と複数の div 要素のデザインの違いを観察できます。

リーリー

メディア クエリの画面と唯一の画面の違い?

ここではメディアクエリにおける画面のみと画面のみの違いを差異表で説明しました。

プロパティの中国語翻訳:プロパティ 的中文翻譯：语法 これは、智能ハンドマシン、スタンド型マシン、パネル電源などのすべての機器に当てはまります。 スキャナやプリンタなどのメディアの種類や機能をサポートしていないデバイスを除くすべてのデバイスも対象としています。

「画面」メディアの種類	「画面のみ」メディアタイプ		構文
@メディア画面 { /* CSS コード */ }	@メディアのみの画面 { /* CSS代コード */ }		目标
		ユーザーは、「画面」メディア タイプと「画面のみ」メディア タイプの違いを学びました。 「only」キーワードは常に「only」キーワードを無視するため、最新のブラウザでは影響しませんが、古いバージョンのブラウザでは役に立ちます。

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