CSS 및 Flexbox를 사용하여 이미지 및 텍스트의 반응 형 레이아웃을 구현하는 방법은 무엇입니까?

CSS 및 Flexbox는 반응 형 그림 텍스트 레이아웃을 구현합니다

반응 형 웹 레이아웃 구축은 웹 개발의 핵심 요구 사항입니다. 이 기사에서는 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, censertur 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 특성을 조정하고 작은 화면 상황에서 flex-direction column 변경하여 진정으로 반응 형 레이아웃을 구현합니다. 이제 장치의 화면 너비에 따라 레이아웃이 적응 적으로 조정됩니다.

위 내용은 CSS 및 Flexbox를 사용하여 이미지 및 텍스트의 반응 형 레이아웃을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!