CSS钳位规则为边距属性生成%/vw值？

uttx8gqw 于 8个月前发布在其他

关注(0)|答案(1)|浏览(86)

我有一个这样的时刻，我的大脑被绑在一个结。
我希望div在viewport为900 px或更宽时具有10%的margin，而在viewport为450 px或更窄时具有1%。并且为了在这两点之间线性插值，例如，675 px viewport将给予5.5%边距。

margin: clamp(1%, ???, 10%);

字符串
这两点给予了一个直线方程（我想！）margin = viewportWidth/50 - 8.

margin: clamp(1%, 100vw/50 - 8vw, 10%);

型
不，这没有意义，它将永远是-6vw。
我觉得也许应该

margin: clamp(1%, 100vw / 50px - 8vw, 10%);

型
但是Devtools（在Edge中）抱怨这是一个无效的属性值。我可以猜测浏览器将vw转换为像素，所以将（比如）800px除以50px并得到16。不是16%或16vw，而是16。我如何更改它？
拜托，谁来帮我解脱吧。

css

来源：https://stackoverflow.com/questions/77490472/css-clamp-rule-to-generate-vw-values-for-margin-property

1条答案

按热度按时间

4nkexdtk1#

好吧，搞定了。

margin: clamp(1%, 19% - 81px, 10%);

字符串
测试：

900px:  900 * .19 - 81  =     90  =   10% of 900
450px:  450 * .19 - 81  =    4.5  =    1% of 450

500px:  500 * .19 - 81  =     14  =  2.8% of 500
675px:  675 * .19 - 81  =  47.25  =    7% of 675
850px:  850 * .19 - 81  =   80.5  =  9.5% of 850

型
好吧，所以675并没有达到5.5%的利润率，但足够好了。虽然我有点理解为什么它没有，我很难用语言表达出来。有人编辑这个答案，请解释一下。
我是怎么到那里的？
两个点（900，10%）和（450，1%）。关键是将它们转换为像素。（900，90）和（450，4.5）。我意识到我要寻找的中间项将是{b}% - {b}px的形式，所以从我的点中创建了两个方程：

(1) 450/100y - x = 4.5
(2) 900/100y - x =  90

型
求解x和y：

(1) becomes: x = 4.5y - 4.5
substitute into (2): 9y - 4.5y + 4.5 = 90
reduces down to: 4.5y = 85.5
gives: y = 19
meaning: x = 4.5 * 19 - 4.5 = 81

y = 19
x = 81

型

赞(0）回复(0）举报 8个月前

我来回答

CSS钳位规则为边距属性生成%/vw值？

1条答案

相关问题

热门标签

最新问答