Comment obtenir un pourcentage de marge de transition fluide lors du redimensionnement de la fenêtre

Question

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 comme 10px / 20px directement 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.

Answer 1

Suivez mes commentaires

• En CSS 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 !
• Vous devez comprendre qu'il en va de même pour l'utilisation des unités de pourcentage (%）将产生像素（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 forme point-pente de l'équation linéaire y=mx+best parfaite pour calculer n'importe quelle taille 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)

.

• point bas (ou coordonnées) = taille de marge requise à une taille de fenêtre faible = (x1,y1)
• Point haut (ou coordonnées) = taille de marge requise à une taille de fenêtre élevée = (x2,y2)

La formule mathématique de point-pentey - y1 = m(x - x1) :

• Utilisez faible (x1,y1) et élevé (x2,y2)
• 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)

pxNous entrons maintenant simplement les valeurs dans l'équation ci-dessus (avec les

transformations appropriées) et simplifions :

• margin = 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 à la fonction, obtenant résultat final

 :

• clamp(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, la forme d'origine de la pente(y = mx + b25vw - 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 }

<h3>点斜式</h3>
<div class="test test1">限制</div>
<div class="test test2">未限制</div>

<h3>斜截式</h3>
<div class="test test3">限制</div>
<div class="test test4">未限制</div>