Comment implémenter la disposition réactive des images et du texte à l'aide de CSS et Flexbox?

CSS et Flexbox implémentent la mise en page réactive du texte de l'image

La construction d'une disposition Web réactive est une exigence de base dans le développement Web. Cet article montrera comment utiliser CSS et Flexbox pour implémenter une disposition réactive avec des images à gauche (200x200 pixels) et du texte à droite. Sur un grand écran, le texte occupe l'espace restant à droite; Sur un petit écran (comme un téléphone mobile), l'image s'affiche au-dessus du texte.

Le code suivant montre comment y parvenir à l'aide de flexbox et de requêtes multimédias:

Code initial (il y a un problème):

<meta charset="utf-8">
<title>Exemple 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, COOSTREUR APISCING ELIT. SED CONSUSAT PLATERAT LOREM.</p>
  </div>
</div>

Le problème avec le code ci-dessus est que la mise en page n'est pas adaptable à la largeur de l'écran, mais est mise à l'échelle également. Cela est dû aux paramètres de métadonnées de la fenêtre manquants.

Solution: ajouter des métadonnées de la fenêtre et ajuster CSS

Pour résoudre ce problème, nous devons Ajouter partiellement les balises de métadonnées de la fenêtre et ajuster le code 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">image</div>
  <div class="text">texte</div>
</div>

Nous mettons en œuvre une disposition vraiment réactive en ajoutant des métadonnées viewport et en ajustant les propriétés flex , et en modifiant flex-direction en column dans des situations de petit écran. La disposition sera désormais ajustée de manière adaptative en fonction de la largeur de l'écran de l'appareil.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!