Je souhaite définir une marge en pourcentage autour de l'élément qui correspond à 5 % de la largeur de la fenêtre lorsque la fenêtre est plus petite et à 15 % de la largeur de la fenêtre lorsque la fenêtre est plus grande.
Je peux utiliser des requêtes multimédias pour modifier la valeur de la marge comme ceci :
.element { margin: 5%; } @media (min-width: 800px) { .element { margin: 15%; } }
Cependant, j'aimerais une transition en douceur entre les pourcentages lorsque la taille de la fenêtre change, plutôt qu'un saut soudain d'une valeur à une autre.
Je pense que quelque chose comme ceci pourrait fonctionner :
@media (min-width: 800px) { .image-grid { margin: 1em calc( (var(--max-margin) - var(--min-margin)) * ((100vw - 800px) / (1920 - 800) + var(--min-margin)) ); } }
Cela devrait théoriquement lisser les valeurs de marge changeantes en définissant les marges en pourcentage de la quantité de changement entre les marges.
Par exemple, lorsque la fenêtre d'affichage est plus petite :min-margin + [margin的变化量] * 0，当视口为中等大小时：min-margin + [margin的变化量] * 0.5，当视口较大时：min-margin + [margin的变化量] * 1
Mais cela ne fonctionne pas réellement car la fonction calc ne renvoie pas de valeurs comme10px / 20pxdirectement sous forme décimale, comme 0,5. Au lieu de cela, il renvoie 0,5 pixels. Et 15 % * 0,5 pixels est déraisonnable et fera revenir la marge à la valeur par défaut de 0.
Peut-être que je vais dans la mauvaise direction. Toute aide serait grandement appréciée.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Suivez mes commentaires
calc(..)vous devez vous assurer que les termes de vos calculs sont légaux. Soyez particulièrement méticuleux avec la division et la multiplication !%）将产生像素（px）的结果，任何视口大小单位（vh,vw,vmin,vmax) et de leurs unités dérivées.Donc, votre premier terme
(var(--max-margin) - var(--min-margin))将产生像素单位，因为大小的%est converti en résultats en pixels.Puisque le deuxième terme
((100vw - 800px) / (1920 - 800) + var(--min-margin))produit également une valeur en unités de pixels, vous multipliez pixel par pixel.Les cookies ne peuvent pas être multipliés par des cookies.
La formepoint-pente de l'équation linéairey=mx+best parfaite pour calculern'importe quelletaille par rapport à la taille actuelle de la fenêtre d'affichage. C'est comme tracer une ligne sur un graphique XY, en utilisant les coordonnées des points bas et haut comme(x1,y1)et(x2,y2)
.La formule mathématique depoint-pente
y - y1 = m(x - x1):y = y1 + (y2 − y1) / (x2 − x1) × (x − x1)Utilisez l'équation substituée :Dans votre cas
5%来计算该大小的边距。我使用了400px的视口宽度，得到0.05 * 400 = 20Pour les points faibles, nous pouvons choisir n'importe quelle taille de fenêtre d'affichage et l'utiliser. Maintenant, nous obtenons le point bas(x1,y1)avec la valeur(400,20)800px的视口上有15%的边距。由于0.15 * 800 = 120Le point haut est facile à trouver car vous souhaitez avoir une largeur supérieure à, le point haut(x2,y2)sera(800,120)
transformations appropriées) et simplifions :pxNous entrons maintenant simplement les valeurs dans l'équation ci-dessus (avec lesmargin = 20 * 1px + (120 - 20) / (800 - 400) * (100vw - 400 * 1px)margin = 20px + 100 / 400 * (100vw - 400px)=>margin = 20px + 0.25 * (100vw - 400px)=>
:5%和15%之间，这将需要使用CSS的clampVous souhaitez restreindre le résultat final à lafonction, obtenantrésultat finalclamp(5%, 20px + 0.25 * (100vw - 400px), 15%)Extrait de code
montre l'effet des versions restreintes et non restreintes (veuillez mettre le navigateur en plein écran et redimensionner pour voir la différence).Au fait, laforme d'origine de la pente(y = mx + b
.25vw - 80px) du résultat final est/* 点斜式 */ .test1 { margin: 0 clamp(5%, 20px + 0.25 * (100vw - 400px), 15%) } .test2 { margin: 0 calc(20px + 0.25 * (100vw - 400px)) } /* 斜截式 */ .test3 { margin: 0 clamp(5%, 25vw - 80px, 15%) } .test4 { margin: 0 calc(25vw - 80px) } /* 仅为视觉效果 */ * { box-sizing: border-box; outline: 1px dashed } body { margin: 0; text-align: center } .test { background-color: Linen }