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

CSSレスポンシブレイアウト：写真とテキストの完璧な組み合わせ

画像とテキストをさまざまな画面サイズで完全に提示できるようにするレスポンシブなWebレイアウトを作成することは、フロントエンド開発で一般的な課題です。この記事では、CSSのフレックスボックスとメディアクエリを使用して、より大きな画面に写真とテキストを並べて表示する効果を実現する方法を詳細に説明しますが、小さな画面（携帯電話など）では、画像が上にあり、テキストが下にあります。

要件の背景

目標は、CSSとFlexBoxを使用して、固定サイズの画像（200x200ピクセル）とテキストを使用したレイアウトを構築することです。大きな画面で、テキストは残りのスペースを取り上げます。小さな画面には、画像はテキストの上にあります。

問題と解決策：ビューポートの重要性

以前の試みでは、画面幅がレイアウトが変わらないという問題に遭遇した可能性があります。これは、通常、ビューポート設定がないためです。ビューポートは、Webページのコンテンツを表示するブラウザウィンドウ内の領域です。正しいビューポート設定では、さまざまなデバイスでWebページが正しくレンダリングおよびスケーリングされるようにします。

完全なソリューション：HTMLおよびCSSコード

応答性のあるレイアウトを達成するためには、 Viewportメタタグを部分的に追加し、CSSコードを調整します。

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フレックスボックスレイアウトの例</title>
    <style>
        .container {
            display: flex;
        }

        .image {
            width: 200px;
            height: 200px;
        }

        .text {
            flex: 1; /* 占据剩余空间 */
        }

        /* 小屏幕媒体查询 (例如手机) */
        @media (max-width: 600px) {
            .container {
                flex-direction: column; /* 垂直布局 */
            }
            .text {
                flex: initial; /* 取消 flex 属性，让文本自适应宽度 */
            }
        }
    </style>


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

コード説明：

• meta name="viewport" ：ビューポートを設定して、デバイスの幅に応じてページスケールを作成します。
• .container ：FlexBoxレイアウトを使用します。
• .image ：画像サイズを設定します。
• .text ： flex: 1;テキストを残りのスペースを占有します。
• @media (max-width: 600px) ：メディアクエリ。画面の幅が600px未満の場合、 flex-directionをcolumnに設定して垂直レイアウトを実現し、 .textのflex属性を削除して、テキストコンテンツが幅に適応できるようにします。

上記の設定を介して、Webページのレイアウトは、画面サイズに従って自動的に調整され、完全なレスポンシブ効果を実現します。実際のニーズに応じて、 max-widthの価値を調整できることを忘れないでください。

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