Comment utiliser l'unité CSS Viewport vw pour implémenter une mise en page adaptative horizontale

Comment utiliser l'unité CSS Viewport vw pour implémenter une mise en page adaptative horizontale

CSS Viewport est une unité relative à la largeur de la fenêtre d'affichage, qui peut être utilisée pour créer des mises en page réactives. Parmi eux, vw représente l'unité de pourcentage de la largeur de la fenêtre.

Dans cet article, nous apprendrons comment utiliser l'unité CSS Viewport vw pour implémenter une mise en page adaptative horizontale et fournirons des exemples de code spécifiques.

1. Définir les styles de base

Tout d'abord, nous devons définir quelques styles de base pour commencer notre mise en page.

HTML:

<div class="container">
  <div class="content">
    <p>这是一个水平自适应布局的示例文本。</p>
  </div>
</div>

CSS:

.container {
  width: 100vw; /* 使用 vw 单位设置容器的宽度 */
  height: 100vh; /* 使用 vh 单位设置容器的高度 */
  display: flex; /* 使用 flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  background-color: #f4f4f4;
}

.content {
  width: 80%; /* 使用百分比设置内容的宽度 */
  padding: 20px;
  background-color: #fff;
}

Dans le code ci-dessus, nous créons un conteneur avec du contenu textuel et utilisons les unités vw et vh pour définir la largeur et la hauteur du conteneur. Nous avons également utilisé la disposition flexbox pour le centrage horizontal et vertical.

2. Ajouter des requêtes multimédias

Ensuite, nous ajouterons des requêtes multimédias pour adapter la mise en page aux différentes largeurs d'écran.

@media (max-width: 768px) {
  .content {
    width: 90%; /* 在小屏幕下，设置内容的宽度为 90% */
  }
}

@media (max-width: 480px) {
  .content {
    width: 95%; /* 在更小屏幕下，设置内容的宽度为 95% */
  }
}

Dans le code ci-dessus, nous utilisons des requêtes multimédias pour contrôler la largeur du contenu sous différentes largeurs d'écran. Lorsque la largeur de l'écran est inférieure ou égale à 768 px, la largeur du contenu est définie sur 90 % ; lorsque la largeur de l'écran est inférieure ou égale à 480 px, la largeur du contenu est définie sur 95 %.

3. Implémenter un effet de défilement

Parfois, nous pouvons souhaiter que la mise en page puisse défiler lorsqu'elle dépasse la largeur de l'écran afin que l'utilisateur puisse voir l'intégralité du contenu. Voici comment obtenir l'effet de défilement.

CSS :

.container {
  overflow-x: scroll; /* 在水平方向上启用滚动效果 */
}

En définissant overflow-x: scroll sur le conteneur, nous pouvons activer les barres de défilement horizontales lorsque la largeur de l'écran est dépassée. Cela permet aux utilisateurs de parcourir l'intégralité du contenu avec une barre de défilement horizontale.

Dans cet article, nous avons appris à utiliser l'unité CSS Viewport vw pour implémenter une mise en page adaptative horizontale. Nous avons défini la largeur et la hauteur du conteneur et obtenu le centrage horizontal et vertical via la disposition flexbox. Nous avons également ajouté des requêtes multimédias pour adapter la mise en page à différentes largeurs d'écran et obtenu un effet de défilement horizontal en définissant overflow-x: scroll.

Grâce à ces technologies et exemples de codes, nous pouvons mieux contrôler et nous adapter à la disposition des différentes tailles d'écran, offrant ainsi aux utilisateurs une meilleure expérience de navigation.

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!