Un pourcentage adaptative

Bonjour, j'aimerais savoir si il était possible de faire varier un pourcentage selon la taille de la page web. Dans mon cas j'aimerais passer d'une margin d'environ 5% à 2% en toute fluidité.

Merci d'avance pour votre aide.

Hello,

Si tu veux des valeurs "fixes" telles que 2% et 5%, il te suffit d'appliquer des Media Queries, par exemple :

.container {
  margin: 2%;
}
@media (min-width: 576px) {
  .container {
    margin: 5%;
  }
}

Par contre, si tu souhaites des marges totalement variables en fonction de la taille de fenêtre, tu peux t'orienter vers les unités de Viewport : vw par exemple.

Bah oui, les unités de Viewport

Tu peux même imposer un minimum et un maximum avec la fonction clamp :

.container {
  margin: clamp(10px, 2vw, 80px);
}

EDIT : un petit exemple en ligne : https://codepen.io/raphaelgoetter/pen/vYmmyxM
Modifié par Raphael (16 Jul 2021 - 18:26)