Wie kann ich mit CSS und Flexbox das reaktionsschnelle Layout von Bildern und Text implementieren?

CSS und Flexbox implementieren reaktionsschnell Bildtextlayout

Das Erstellen eines reaktionsschnellen Weblayouts ist eine zentrale Anforderung in der Webentwicklung. In diesem Artikel wird gezeigt, wie CSS und Flexbox verwendet werden, um ein reaktionsschnelles Layout mit Bildern links (200x200 Pixel) und Text auf der rechten Seite zu implementieren. Auf einem großen Bildschirm nimmt Text den verbleibenden Raum rechts ein; Auf einem kleinen Bildschirm (z. B. einem Mobiltelefon) wird das Bild über dem Text angezeigt.

Der folgende Code zeigt, wie dies mit Flexbox- und Medienabfragen erreicht wird:

Erstcode (es gibt ein Problem):

<meta charset="utf-8">
<title>Flexbox -Beispiel</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, Konsistende Apiscing Elit. Sed Folg Placerat Lorem.</p>
  </div>
</div>

Das Problem mit dem obigen Code ist, dass das Layout nicht an die Bildschirmbreite anpassbar ist, sondern gleichermaßen skaliert ist. Dies liegt an den fehlenden Ansichtsfenster -Metadateneinstellungen.

Lösung: Hinzufügen von Ansichtsfenstermetadaten und CSS einstellen

Um dieses Problem zu lösen, müssen wir Fügen Sie teilweise Ansichtsfenster -Metadaten -Tags hinzu und passen Sie den CSS -Code an:

<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">Bild</div>
  <div class="text">Text</div>
</div>

Wir implementieren ein wirklich reaktionsschnelles Layout, indem wir viewport Metadaten und flex hinzufügen und flex-direction in kleinen Bildschirmsituationen in column ändern. Das Layout wird nun adaptiv gemäß der Bildschirmbreite des Geräts eingestellt.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS und Flexbox das reaktionsschnelle Layout von Bildern und Text implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!