Comment utiliser les unités CSS Viewport vw et vh pour implémenter une mise en page qui s'adapte aux écrans des tablettes et des mobiles-tutoriel CSS-php.cn

Comment utiliser les unités CSS Viewport vw et vh pour implémenter une mise en page qui s'adapte aux écrans des tablettes et des mobiles

PHPz

Libérer： 2023-09-13 12:26:00

original

1385 Les gens l'ont consulté

如何使用 CSS Viewport 单位 vw 和 vh 来实现适应平板和手机屏幕的布局

Comment utiliser les unités CSS Viewport vw et vh pour implémenter une mise en page qui s'adapte aux écrans des tablettes et des mobiles

Lors de la conception de mises en page Web réactives, nous devons souvent prendre en compte les problèmes d'adaptation des différentes tailles d'écran des appareils. Les unités CSS Viewport vw (largeur de la fenêtre) et vh (hauteur de la fenêtre) offrent un moyen simple d'adapter la mise en page aux écrans des tablettes et des mobiles.

Les unités de fenêtre vw et vh sont calculées par rapport à la largeur et à la hauteur de la fenêtre, où 1vw est égal à 1% de la largeur de la fenêtre et 1vh est égal à 1% de la hauteur de la fenêtre. En utilisant ces unités de manière appropriée, nous pouvons facilement contrôler la taille et la position des éléments dans différentes tailles de fenêtre.

Ce qui suit présentera en détail comment utiliser les unités CSS Viewport vw et vh pour implémenter une mise en page qui s'adapte aux écrans des tablettes et des téléphones portables.

Définir les styles de base

Avant de commencer la mise en page, nous devons définir certains styles de base pour garantir que le style par défaut de la page s'adapte aux différents écrans des appareils. Tout d'abord, nous pouvons ajouter le style suivant à l'élément body :

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Copier après la connexion

Cela éliminera les marges et le remplissage par défaut et définira le modèle de boîte sur le modèle de boîte de bordure.

Utilisez les unités vw et vh pour définir la taille des éléments

Lors de la conception de la mise en page, nous devons prendre en compte les changements de taille des éléments de page sous différentes tailles de fenêtre d'affichage. À ce stade, vous pouvez utiliser les unités vw et vh pour définir la taille de l'élément.

.element {
  width: 50vw; /* 宽度为视窗宽度的 50% */
  height: 30vh; /* 高度为视窗高度的 30% */
}

Copier après la connexion

En définissant la largeur et la hauteur sur des valeurs unitaires relatives, nous pouvons garantir que l'élément conserve des proportions appropriées dans différentes tailles de fenêtre.

Définir la position de l'élément à l'aide des unités vw et vh

En plus de définir la taille de l'élément, nous devons également prendre en compte la position de l'élément sur la page. À ce stade, vous pouvez utiliser les unités vw et vh pour définir la position de l'élément.

.element {
  position: absolute;
  left: 50vw; /* 左边距为视窗宽度的 50% */
  top: 25vh; /* 上边距为视窗高度的 25% */
}

Copier après la connexion

En définissant les propriétés left et top sur des valeurs unitaires relatives, nous pouvons garantir que la position relative de l'élément reste inchangée dans différentes tailles de fenêtre.

Ajuster la mise en page à l'aide de requêtes multimédias

En utilisant des requêtes multimédias, nous pouvons appliquer différents styles ou mises en page en fonction des différentes tailles d'écran de l'appareil.

Par exemple, lorsque la largeur de l'écran est inférieure à 768px, nous pouvons ajuster la taille et la position de l'élément :

@media (max-width: 768px) {
  .element {
    width: 80vw;
    height: 25vh;
    left: 10vw;
    top: 15vh;
  }
}

Copier après la connexion

De cette façon, lorsque la largeur de l'écran est inférieure à 768px, la taille et la position de l'élément .element seront être ajusté en fonction du style de la requête multimédia.

En résumé, en utilisant les unités CSS Viewport vw et vh, nous pouvons facilement obtenir une adaptabilité de la mise en page aux écrans des tablettes et des mobiles. En définissant la taille et la position des éléments sur des valeurs unitaires relatives et en combinant les requêtes multimédias pour s'adapter aux différentes tailles d'écran des appareils, nous pouvons garantir que les pages Web présentent la meilleure expérience utilisateur sur différents appareils.

Exemple de code :

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    .element {
      width: 50vw;
      height: 30vh;
      position: absolute;
      left: 50vw;
      top: 25vh;
      background-color: red;
    }
    
    @media (max-width: 768px) {
      .element {
        width: 80vw;
        height: 25vh;
        left: 10vw;
        top: 15vh;
      }
    }
  </style>
</head>
<body>
  <div class="element"></div>
</body>
</html>

Copier après la connexion

Ce qui précède est la méthode et l'exemple de code sur la façon d'utiliser les unités CSS Viewport vw et vh pour implémenter une mise en page qui s'adapte aux écrans des tablettes et des mobiles. J'espère que cela vous sera utile dans votre travail d'adaptation de mise en page !

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!