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

CSSとFlexBoxは、レスポンシブ画像テキストレイアウトを実装します

レスポンシブなWebレイアウトの構築は、Web開発におけるコア要件です。この記事では、CSSとFlexBoxを使用して、左側に写真（200x200ピクセル）と右側にテキストを含むレスポンシブレイアウトを実装する方法を示します。大きな画面では、テキストは右側の残りのスペースを占有します。小さな画面（携帯電話など）では、画像がテキストの上に表示されます。

次のコードは、FlexBoxおよびメディアクエリを使用してこれを達成する方法を示しています。

初期コード（問題があります）：

<meta charset="utf-8">
<title>FlexBoxの例</title>
<style>
  .container {
    display: flex;
    flex-direction: row; /* 默认水平布局 */
  }

  .image {
    width: 200px;
    height: 200px;
    background-color: #f0f0f0;
    margin-right: 20px; /* 图片和文本之间的间距 */
  }

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

  /* 在小尺寸屏幕上媒体查询 */
  @media screen and (max-width: 600px) {
    .container {
      flex-direction: column; /* 垂直布局 */
    }

    .image {
      margin-bottom: 20px; /* 图片下方留出间距 */
    }
  }
</style>
<div class="container">
  <div class="image"></div>
  <div class="text">
    <p>Lorem Ipsum dolor sit amet、consceTur Apiscing Elit。 SED結果Placerat Lorem。</p>
  </div>
</div>

上記のコードの問題は、レイアウトが画面幅に適応できないが、均等に拡大されることです。これは、ビューポートメタデータの設定が欠落しているためです。

解決策：ビューポートメタデータを追加し、CSSを調整します

この問題を解決するには、する必要がありますビューポートメタデータタグを部分的に追加し、CSSコードを調整します。

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

<style>
  .container {
    display: flex;
  }

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

  .text {
    flex: 1;
  }

  /* 在小尺寸设备上，重置布局 */
  @media (max-width: 600px) {
    .container {
      flex-direction: column;
      /* 将布局改为垂直方向 */
    }

    .image {
      width: 200px;
      height: 200px;
    }
    .text {
      width: auto;
      /* 让元素宽度自适应 */
      height: auto;
      /* 让元素高度自适应 */
    }

    /* 取消 .text 的 flex 属性 */
    .text {
      flex: initial;
      /* 或者可以使用 flex: none; */
    }
  }
</style>
<div class="container">
  <div class="image">写真</div>
  <div class="text">文章</div>
</div>

viewportメタデータを追加し、 flexプロパティを微調整し、小さな画面の状況でのcolumnへのflex-direction変更することにより、真にレスポンシブレイアウトを実装します。レイアウトは、デバイスの画面幅に応じて適応的に調整されます。

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