在此處使用此方法：https ://css-tricks.com/fun-viewport-units/
我想計算如何在視口大小1920px 和 375px之間實作特定數量的變化
示例：我希望我的 150px 元素在 1920px 和 375px 之間減小 40px
問題：
我不確定我應該使用什么方程來最好地定義我的輸入值。
我嘗試在 1920 像素處取所需的 150 像素大小，加上 40 像素除以 19.2 (2.083vw) 減去 40 像素：
width: calc(150px (2.083vw - 40px))
它非常接近，但不完全在那里，在 1920px 處只有150px，但在 375px 處有 117px。
我還嘗試使用 40px 除以視口大小 15.45 之間的差異：
width: calc(150px (2.588vw - 40px))
但這在 1920px 和 119px 在 1920px和119px 在 375px的距離要遠得多：
部分解決方案：
如果我用元素boxfix擺弄數字是正確的（或者足夠接近而不關心每個方向的半個像素）
width: calc(150px (2.56vw - 49.5px))
因為我不想每次都擺弄這些數字，我希望有一種方法可以更準確地計算每個數字的值，或者如果有更好的總和我可以用來實作同樣的事情。
JS小提琴：
這是一個 JSFiddle，以防萬一：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>uj5u.com熱心網友回復：
您需要求解等式Y = A*X B，在您的情況下是Y寬度并且X是100vwwidth: calc(A*100vw B)
當100vw = 1920px您需要時width: 150px，我們有
150px = A*1920px B
當100vw = 375px您需要時width: 110px，我們有
110px = A*375px B
我們做一些數學運算，我們A = 0.026得到B = 100.3
你的代碼width: calc(0.026*100vw 100.3px)也是width: calc(2.6vw 100.3px)
你也可以寫成
--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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/464887.html
上一篇：在矩形網格上制作和連接六邊形