CSS FlexBoxを使用して、画像とテキストのレスポンシブレイアウトを実装する方法は？

CSSフレックスボックスレスポンシブレイアウト：画像とテキストの完璧な組み合わせ

さまざまな画面サイズに対処するために、適応型のWebレイアウトを構築することが重要です。この記事では、CSS Flexboxを使用して共通のレイアウト要件を実現する方法を示します。左側の固定サイズの写真と右側の適応テキストコンテンツ。ワイドスクリーンデバイスでは、テキストが残りのスペースを占有します。 nrowscreenデバイス（携帯電話など）では、テキストの上に画像が表示されます。

課題：画面サイズの適応レイアウトの実装

ターゲット：FlexBoxレイアウトを使用して、左側に200x200ピクセルの画像と右側のテキストを表示します。大きな画面の下で、テキストは残りのスペースを埋めます。小さな画面の下には、写真はテキストの上にあります。

以前の試み（ChatGPTによって生成されたコードなど）には問題がある場合があります。レイアウトは均等にのみスケーリングされ、画面サイズに応じて動的に調整することはできません。

解決策：ViewPortメタデータとメディアクエリを巧みに使用します

重要なのは、ビューポートメタデータとメディアクエリを追加することです。

まず、HTMLでViewportメタデータを部分的に追加します：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

このコード行は、ページ幅がデバイスの幅と一致し、初期スケーリング比が1.0であることをブラウザに伝え、応答性の効果を確保します。

第二に、CSSコードを調整し、メディアクエリを使用して、さまざまな画面サイズでレイアウトを制御します。

 。容器 {
  ディスプレイ：Flex;
}

。画像 {
  幅：200px;
  高さ：200px;
}

。文章 {
  フレックス：1; /*残りのスペースを占有*/
}

@media（max-width：600px）{ /*小画面デバイスの場合* /
  。容器 {
    フレックス方向：列; /*レイアウトを垂直に変更します*/
  }
  。文章 {
    フレックス：初期; /* Flex属性をキャンセルしてテキスト幅を適応させる*/
  }
}

HTML構造の例：

<div class="container">
  <div class="image">写真</div>
  <div class="text">テキストコンテンツ</div>
</div>

上記の調整により、レイアウトは画面幅に応じて動的に変更されます。大きな画面の下で、写真とテキストは水平に配置されます。小さな画面の下には、写真はテキストの上にあり、異なるデバイスに完全に適合しています。

以上がCSS FlexBoxを使用して、画像とテキストのレスポンシブレイアウトを実装する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。