Utilisez les bonnes unités de mise en page CSS pour créer de superbes conceptions Web

Choisissez l'unité de mise en page CSS appropriée pour créer une conception Web élégante

Dans la conception Web, l'unité de mise en page CSS est un élément crucial. Différentes unités de mise en page peuvent nous aider à mieux contrôler la taille, l'espacement et la position des éléments de la page Web, créant ainsi une conception Web élégante et esthétique. Cet article présentera plusieurs unités de mise en page CSS courantes et fournira des exemples de code spécifiques.

1. Unité Pixel (px)

Les pixels sont l'une des unités de mise en page CSS les plus courantes. Il a une taille fixe et convient aux situations où un contrôle précis de la taille et de la position des éléments est requis. Par exemple, nous pouvons définir la largeur d'un élément sur 200 pixels en utilisant les unités de pixels :

.element {
  width: 200px;
}

2. Unité de pourcentage (%)

L'unité de pourcentage est calculée par rapport à la taille de l'élément parent, ce qui peut nous aider à mettre en œuvre une mise en page réactive. . En utilisant des unités de pourcentage, nous pouvons redimensionner automatiquement les éléments à mesure que la taille de l'écran change. Par exemple, nous pouvons utiliser des unités de pourcentage pour définir la largeur d'un élément à 50 % de l'élément parent :

.element {
  width: 50%;
}

3. Unités de fenêtre de visualisation (vw, vh)

Les unités de fenêtre de visualisation font référence aux unités relatives à la taille de l'élément. fenêtre du navigateur. L'unité vw (largeur de la fenêtre) représente le rapport par rapport à la largeur de la fenêtre, et l'unité vh (hauteur de la fenêtre) représente le rapport par rapport à la hauteur de la fenêtre. Les unités de fenêtre sont largement utilisées dans la conception réactive et peuvent redimensionner dynamiquement les éléments en fonction de la taille de la fenêtre.

Par exemple, nous pouvons utiliser les unités vw pour définir la largeur d'un élément à 30 % de la largeur de la fenêtre d'affichage :

.element {
  width: 30vw;
}

4. unités em et rem

les unités em sont des unités calculées par rapport à la taille de la police de l'élément parent , et unités rem L'unité est-elle calculée par rapport à la taille de la police de l'élément racine (html). Les unités em et rem peuvent nous aider à obtenir une mise en page de taille relative quelle que soit la taille de la police.

Par exemple, nous pouvons définir la largeur d'un élément à 2 fois la taille de la police en utilisant les unités em :

.element {
  width: 2em;
}

5. Unité adaptative (fr)

L'unité adaptative (fr) est une unité dans la disposition CSS Grid, utilisée pour alloue automatiquement l’espace restant. L'unité fr peut nous aider à réaliser une disposition d'éléments uniformément répartis, particulièrement adaptée à la disposition en grille.

Par exemple, nous pouvons utiliser l'unité fr pour implémenter une mise en page simple à deux colonnes :

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

En choisissant l'unité de mise en page CSS appropriée, nous pouvons contrôler de manière plus flexible la mise en page de la page Web, créant ainsi un site Web élégant et beau. conception. Ci-dessus sont quelques unités de mise en page CSS courantes, chacune ayant des caractéristiques et des scénarios d'application différents. J'espère que cet article pourra vous aider à mieux utiliser les unités de mise en page et à améliorer la qualité et l'effet de la conception Web.

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!