Les requêtes de conteneur CSS permettent aux composants de répondre aux modifications en fonction de leur taille de conteneur plut?t que des fenêtres, en résolvant les limites des requêtes multimédias traditionnelles dans le développement des composants. ① Définissez l'élément parent comme un conteneur de requête et nommez-le en définissant le conteneur-type: conteneur en ligne ou en ligne: carte / taille en ligne; ② Utilisez la syntaxe de la carte @Container (Min-Width: 400px) pour appliquer des styles lorsque la largeur du conteneur atteint les conditions spécifiées, afin de passer de la disposition verticale à la disposition horizontale; ③ Ce mécanisme permet à la même composante d'être affichée de manière adaptative dans différents conteneurs, adaptés à la mise en page de la grille, à la bibliothèque de composants et aux systèmes CMS; ④ à la mi-2024, Chrome 105, Safari 16.4 et Edge 105 ont été soutenus, et Firefox 110 doit permettre des fonctions expérimentales. Il est recommandé de vérifier la compatibilité avec puis-je utiliser. Utilisez correctement Container et @Container pour construire des composants d'interface utilisateur réactifs qui sont des conteneurs vraiment adaptatifs.

Les requêtes de conteneur CSS sont un mécanisme que les composants répondent aux modifications en fonction de la taille de leur conteneur plut?t que de la fenêtre entière. Par rapport aux requêtes multimédias traditionnelles ( @media ), les requêtes en conteneurs conviennent plus pour construire des composants réactifs réutilisables.

Voici un exemple de requêtes de conteneur CSS simple montrant comment l'utiliser pour créer un composant de carte qui détermine la disposition en fonction de la largeur du conteneur.

? Exemple d'utilisation de base: commutation de mise en page de la carte

Html

 <div class = "card-container">
  <div class = "card">
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175393313460463.jpeg"  class="lazy"  src = "image.jpg" alt = "Exemple d&#39;image" />
    <div class = "Content">
      <h3> Titre </h3>
      <p> Il s&#39;agit d&#39;un paragraphe descriptif. </p>
    </div>
  </div>
</div>

<div class = "Card-Container Wide">
  <div class = "card">
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175393313460463.jpeg"  class="lazy"  src = "image.jpg" alt = "Exemple d&#39;image" />
    <div class = "Content">
      <h3> un autre titre </h3>
      <p> Ce texte s&#39;affiche comme une disposition horizontale dans un conteneur plus large. </p>
    </div>
  </div>
</div>

CSS

 / * étape 1: Définissez un conteneur (la clé pour activer la requête du conteneur) * /
.Card-container {
  Type de conteneur: taille en ligne; / * Activer la requête de conteneur basé sur la largeur * /
}

/ * Ou utiliser une syntaxe abrégée (recommandée) * /
.Card-container {
  conteneur: carte / taille en ligne; / * Un conteneur nommé ?carte?, écoutant les dimensions d'orientation en ligne * /
}

/ * Version étroite par défaut: empilement vertical * /
.carte {
  Affichage: flex;
  Flex-Direction: colonne;
  Border: 1px solide #ccc;
  Border-Radius: 8px;
  débordement: caché;
  Font-Family: Sans-Serif;
}

.Card img {
  Largeur: 100%;
  Hauteur: Auto;
}

.Card .Content {
  rembourrage: 16px;
}

/ * Lorsque la largeur du conteneur> = 400px, passez à la disposition horizontale * /
Card @Container (Min-Width: 400px) {
  .carte {
    Direction flexible: ligne;
    Align-Items: Centre;
  }

  .Card img {
    Largeur: 50%;
    Hauteur: Auto;
  }

  .Card .Content {
    rembourrage: 20px;
  }
}

? Expliquez les points clés

• container-type: inline-size;
  Indique que l'élément devient un conteneur de requête qui écoute uniquement ses dimensions d'orientation en ligne (généralement la largeur).

  

• container: card / inline-size;
  Il s'agit de la syntaxe abrégée, et le conteneur est nommé card , ce qui facilite la distinction entre différents conteneurs dans plusieurs requêtes.

• @container card (min-width: 400px)
  Le style à l'intérieur ne prend effet que si la largeur de card largeur du conteneur est ≥ 400px.

  

• Ne s'appuyant plus sur la largeur de l'écran, mais la largeur du conteneur parent composant - plus adapté au développement des composants (tels que différentes performances dans la barre latérale ou la zone de contenu principale).

? Scénarios d'application pratiques

• Les cartes dans la disposition de la grille ajustent automatiquement la méthode d'affichage en fonction de la largeur de la colonne
• Des packages réactifs tels que des groupes de boutons et des barres de navigation qui peuvent être réutilisées dans la bibliothèque des composants
• Dans CMS ou Systèmes de mise en page, le même composant prend différentes formes dans différentes régions

?? Compatibilité du navigateur (à la mi-2024)

Le soutien est bon, mais l'attention doit être accordée à:

• Chrome 105 ?
• Firefox 110 (nécessite une layout.css.container-queries.enabled ) ??
• Safari 16,4 ?
• Bord 105 ?

Puis-je utiliser - requêtes de conteneur

Fondamentalement, c'est tout. Avec container et @container bien, vous pouvez écrire des composants d'interface utilisateur qui sont vraiment des ?conteneurs adaptatifs?, pas seulement des ?écrans adaptatifs?.

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!