CSS で特定の広いビューポートの背景色を変更するにはどうすればよいですか?

「ビューポート」幅と呼ばれるものを使用して、どのデバイスが使用されているかを判断できます。

コンピュータ グラフィックスでは、ビューポートは通常、ユーザーが現在見ている多角形 (通常は長方形) の領域を指します。 Web ブラウザ のビューポートについて話すときは、通常、コンテンツが表示され、ユーザーがウィンドウの外のコンテンツを表示できないウィンドウを指します。

ビューポートには基本的に 2 種類があります。

• ブラウザが Web ページ全体を描画する固定ビューポートは、

  レイアウト ビューポートと呼ばれます。

• スケーリングまたはその他の理由により現在表示されているレイアウト ビューポートの部分は、

  ビジュアル ビューポートと呼ばれます。

＃＃＃画面サイズ＃＃＃

これは基本的に、デバイスの物理的な幅と高さを指します。さまざまな画面サイズのデバイスが多数あり、画面サイズに応じて、ユーザーが Web ページを操作する方法が変わります。では、画面サイズとビューポート幅の間にはどのような関係があるのでしょうか。

デバイスに関係なく、ユーザーは垂直スクロールに慣れています。そのため、デバイスの分類にビューポートの幅を使用します。これは、レイアウト ビューポートの最大幅がデバイスの物理的な制約を受けるためです。幅。

• この時点で、「ビューポート」とは何か、そしてそれが画面サイズにどのように関係するのかがわかりました。特定の幅を超えるとスタイルが変更される応答性の高い Web ページが必要な場合は、メタ ビューポート タグを使用してビューポートを設定する必要があります。

• このタグは、ページのサイズとスケーリングを制御する方法をブラウザーに指示します。メタ ビューポートの値
width=device-width
• は、画面の幅と一致するようにページの幅 (デバイスに依存しないピクセル単位) を調整するようにページに指示します。
  ページは、initial-scale=1 の値を追加することで横幅全体を利用できます。これは、デバイスの向きに関係なく、CSS ピクセルとデバイスに依存しないピクセルとの間に 1:1 の関係を確立するようにブラウザーに指示します。
＃＃＃例＃＃＃

以下は、デバイス幅と初期スケーリング 1 を使用してビューポートを設定する例です。

リーリー

メディアクエリとメディアルール

ビューポートの幅を使用してスタイルの変更をトリガーできることはわかったので、次に CSS でのメディア クエリについて説明します。メディア クエリを使用すると、デバイスの全体的なタイプ (印刷と画面など) またはその他の詳細 (画面の解像度やブラウザのビューポート幅など) に基づいて CSS スタイルを適用できます。メディア クエリを使用して、次のタスクを実行します −

条件付きでスタイルを適用します。

• 特定の形式のメディアをターゲットにする必要がある場合

• または、メディアのステータスをテストしたい場合、または監視する必要がある場合

• メディア クエリを使用するには、ターゲット メディア タイプとターゲット機能を指定する必要があります。論理演算子を使用して、非常に複雑なメディア クエリを作成することもできます。メディア クエリの意味を逆にしないようにすることもできます。これは場合によっては非常に便利です。メディアクエリの例を見てみましょう。

  リーリー

  上記のメディア クエリは印刷タイプのメディアにのみ適用され、色が黒に変更され、フォント サイズが大きくなります。

複雑なメディア クエリの例を以下に示します。

リーリー

上記のクエリは、サイズが少なくとも 30em で横向きのメディアに適用されます。

メディア ルール −

メディア タイプとメディア特性を指定する部分は、メディア ルールと呼ばれることがよくあります。

以下は、メディア ルールで使用できるさまざまな論理演算子のリストです -

＃＃＃＃＃＃いいえ＃＃＃＃＃＃ ＃＃＃＃＃＃その上＃＃＃＃＃＃ ＃＃＃＃＃＃または＃＃＃＃＃＃

＃＃＃例＃＃＃

以下に、メディア クエリを使用して現在の問題を解決するサンプル コードを示します。

リーリー ＃＃＃結論は＃＃＃

要約すると、CSS でメディア クエリを使用すると、特定の広いビューポートの背景色を変更できます。ビューポートの幅を指定し、それをコードで使用するだけで、特定のビューポート サイズに異なる背景色を設定できます。これにより、あらゆるデバイスの種類や画面サイズに合わせて最適化された Web サイトのデザインを作成できるようになります。これは、優れたユーザー エクスペリエンスを提供するために重要です。

以上がCSS で特定の広いビューポートの背景色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。