Apprenez les connaissances et les compétences de base de la mise en page réactive HTML, en partant de zéro

Apprenez les connaissances et les compétences de base de la mise en page réactive HTML

Avec la popularité des appareils mobiles, la mise en page réactive est devenue une compétence essentielle pour la conception et le développement de sites Web. La mise en page réactive permet au site Web d'ajuster automatiquement les effets de mise en page et d'affichage sous différentes tailles d'écran, offrant ainsi une meilleure expérience utilisateur. Cet article explique comment acquérir les connaissances et compétences de base de la mise en page réactive HTML à partir de zéro et fournit des exemples de code spécifiques.

1. Requêtes multimédias HTML

Les requêtes multimédias sont l'une des pierres angulaires de la mise en page réactive. Il peut appliquer différentes feuilles de style en fonction de la taille de l'écran, de l'orientation, de la résolution et d'autres caractéristiques de l'appareil. Les requêtes multimédias sont définies à l'aide de la règle @media. Voici un exemple simple de requête média :

@media screen and (max-width : 600px) {
body {

background-color: lightblue;

}
}

La signification de ce code est que lorsque la largeur de l'écran est inférieure ou égale à 600 pixels, définissez la couleur d'arrière-plan du corps sur bleu clair. Diverses propriétés et valeurs CSS peuvent être utilisées dans les requêtes multimédias pour réaliser des ajustements de mise en page complexes.

2. Mise en page fluide

La mise en page fluide est un mode de mise en page réactif courant, qui ajuste automatiquement la taille et l'ordre du contenu Web en fonction de la largeur de l'écran. Dans une mise en page fluide, la largeur d'un élément est généralement un pourcentage par rapport à son élément parent. Ce qui suit est un exemple simple de disposition fluide :

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

<style>
.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 33.33%;
  background-color: lightgray;
  padding: 10px;
  box-sizing: border-box;
}

@media screen and (max-width: 600px) {
  .box {
    width: 50%;
  }
}
</style>

Dans le code ci-dessus, l'élément conteneur utilise une disposition flexible et les éléments box sont disposés en fonction de pourcentages. Lorsque la largeur de l'écran est inférieure ou égale à 600 pixels, la largeur de l'élément box est ajustée à 50 % via des requêtes multimédias.

3. Disposition de grille flexible

La disposition de grille flexible est un mode de mise en page réactif plus avancé qui utilise les fonctionnalités de disposition de grille CSS pour réaliser un ajustement automatique de plusieurs colonnes. La disposition flexible de la grille ajuste automatiquement le nombre et la taille des colonnes de la grille en fonction de la largeur de l'écran et de la taille des éléments. Voici un exemple simple de disposition en grille élastique :

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.box {
  background-color: lightgray;
  padding: 10px;
  box-sizing: border-box;
}
</style>

Dans le code ci-dessus, l'élément conteneur utilise la disposition en grille et définit la largeur minimale et maximale de chaque colonne via l'attribut grid-template-columns. Grâce à la fonction de répétition et au mot-clé d'ajustement automatique, l'effet d'ajustement automatique du nombre de colonnes peut être obtenu.

4. CSS Framework

En plus d'écrire manuellement du code HTML et CSS, vous pouvez également utiliser certains frameworks CSS prêts à l'emploi pour simplifier le développement d'une mise en page réactive. Les frameworks CSS couramment utilisés incluent Bootstrap, Foundation, etc. Ces frameworks fournissent un riche ensemble de composants et de styles qui permettent de créer rapidement des mises en page réactives. Voici un exemple utilisant le framework Bootstrap :

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4">Box 1</div>
    <div class="col-sm-6 col-md-4">Box 2</div>
    <div class="col-sm-6 col-md-4">Box 3</div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Dans le code ci-dessus, le système de grille de Bootstrap est utilisé pour implémenter une mise en page réactive. Grâce à la classe col et aux différents points d'arrêt d'écran, vous pouvez définir la largeur et la disposition des éléments sous différentes tailles d'écran.

Résumé :

Apprendre la mise en page réactive HTML à partir de zéro nécessite de maîtriser des connaissances et des compétences de base telles que les requêtes multimédias, la mise en page fluide et la mise en page de grille élastique. Grâce à une pratique et une expérimentation continues, vous pouvez approfondir votre compréhension de la mise en page réactive et améliorer vos capacités de mise en page. De plus, l'utilisation de frameworks CSS peut accélérer le développement et améliorer l'efficacité. Nous espérons que les exemples de code fournis dans cet article pourront aider les lecteurs à mieux apprendre et pratiquer la mise en page réactive HTML.

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!