27547 sujets

CSS et mise en forme, CSS3

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.
Administrateur
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.
Il n'y a pas moyen d'avoir un résultat plus fluide ? J'ai déjà pensé à cette option mais la transition est top brusque à mon goût.
Administrateur
Bah oui, les unités de Viewport Smiley cligne

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)