Calcul de la taille des éléments CSS fluides à l'aide de CSS à l'aide de calc (px + vw)

En utilisant cette méthode ici : https://css-tricks.com/fun-viewport-units/

Je veux calculer comment obtenir une quantité spécifique de changement entre les tailles de port d'affichage 1920px et 375px

Exemple: je souhaite que mon élément de 150px se réduise de 40px entre 1920px et 375px

Le problème:

Je ne sais pas quelle équation je devrais utiliser pour définir au mieux mes valeurs d'entrée.

J'ai essayé de prendre la taille souhaitée de 150 pixels à 1920 pixels en ajoutant 40 pixels divisés en 19,2 (2,083 vw) moins 40 pixels :

width: calc(150px + (2.083vw - 40px))

C'est très proche, mais pas tout à fait là, juste en dessous de 150px à 1920px, mais 117px à 375px.

J'ai également essayé d'utiliser 40px diviser par la différence entre les tailles de fenêtre 15,45 :

width: calc(150px + (2.588vw - 40px))

Mais c'était beaucoup plus loin 160px à 1920px et 119px à 375px:

Solution partielle:

Si je manipule les chiffres comme on le voit avec l'élément boxfix, c'est bon (ou assez proche pour ne pas se soucier de la moitié de px dans chaque sens)

width: calc(150px + (2.56vw - 49.5px))

Comme je ne veux pas avoir à manipuler les chiffres à chaque fois, j'espère qu'il existe un moyen de calculer la valeur de chacun avec plus de précision, ou s'il existe une meilleure somme que je pourrais utiliser pour obtenir la même chose.

JS Fiddle :

Voici un JSFiddle au cas où il serait utile : https://jsfiddle.net/8qdptyj3/1/

body {
 font-size: 18px;
}
.box {
 width: calc(150px + (2.083vw - 40px))
}
.boxfix {
 width: calc(150px + (2.56vw - 49.5px))
}

<div class="box" style="background:red;color:white;margin:10px;">
 Hello World
</div>
<div class="boxfix" style="background:red;color:white;margin:10px;">
 Hello World
</div>

Solution du problème

Vous devez résoudre l'équation Y = A*X + Boù, dans votre cas, Yest la largeur et Xest 100vwSowidth: calc(A*100vw + B)

Lorsque 100vw = 1920pxvous en avez besoin width: 150px, nous avons

150px = A*1920px + B

Lorsque 100vw = 375pxvous en avez besoin width: 110px, nous avons

110px = A*375px + B

Nous faisons quelques calculs et nous obtenons A = 0.026etB = 100.3

Votre code est width: calc(0.026*100vw + 100.3px)égalementwidth: calc(2.6vw + 100.3px)

Vous pouvez également l'écrire comme

--a: ((150 - 110)/(1920 - 375));
--b: 150px - 1920px*var(--a); /* OR 110px - 375px*var(--a) */
width: calc(var(--a)*100vw + var(--b));

body {
 font-size: 18px;
}
.box {
 width: calc(2.6vw + 100.3px);
 height: 100px;
}
.box-alt {
 --a: ((150 - 110)/(1920 - 375));
 --b: 150px - 1920px*var(--a);
 width: calc(var(--a)*100vw + var(--b));
 height: 100px;
}

<div class="box" style="background:red;color:white;margin:10px;">
</div>
<div class="box-alt" style="background:red;color:white;margin:10px;">
</div>