[英]How can I automatically interpolate n intermediate values for a CSS property given an upper and lower bound?
If I have some media queries that set a value based on the current screen width how can I automate the computation of n intermediate steps ?如果我有一些基于当前屏幕宽度设置值的媒体查询,如何自动计算 n 个中间步骤?
As example: if I had a top value of 50% at 1080p and a value of 32% at 2160p I should be able to compute 4 intermediate steps:例如:如果我在 1080p 时的最高值为 50%,在 2160p 时的最高值为 32%,我应该能够计算 4 个中间步骤:
@media(min-height: 1080px) {
top: 50%;
}
@media(min-height: 1350px) {
top: 45.5%;
}
@media(min-height: 1620px) {
top: 41%;
}
@media(min-height: 1890px) {
top: 36.5%;
}
@media(min-height: 2160px) {
top: 32%;
}
I'm interested in any sort of possible solution: pure CSS, Sass, JS, etc.我对任何可能的解决方案感兴趣:纯 CSS、Sass、JS 等。
(Also, could this kind of computation be possible for non linear values?) (另外,这种计算是否可以用于非线性值?)
You could use a mixin to generate the steps, it would be a basic @for
loop.您可以使用 mixin 来生成步骤,这将是一个基本的@for
循环。
Depending on the flexibility you want for the mixin you'll need few arguments:根据你想要的 mixin 的灵活性,你需要几个 arguments:
$stepsNb
$minWidthQuery
$maxWidthQuery
$property
$minValue
$maxValue
Then the mixin will calculate the steps for you:然后mixin会为你计算步骤:
@mixin interpolateSteps($stepsNb: 5, $minWidthQuery: 1080px, $maxWidthQuery: 2160px, $property, $minValue, $maxValue) {
$step: ($maxWidthQuery - $minWidthQuery) / ($stepsNb - 1);
$stepValue: ($maxValue - $minValue) / ($stepsNb - 1);
@for $i from 0 to $stepsNb {
@media(min-height: $minWidthQuery + ($step * $i)) {
#{$property}: $minValue + ($stepValue * $i);
}
}
}
You would use it like this:你会像这样使用它:
.foobar {
@include interpolateSteps($property: top, $minValue: 50%, $maxValue: 32%);
}
And it would output:它会 output:
@media (min-height: 1080px) {
.foobar {
top: 50%;
}
}
@media (min-height: 1350px) {
.foobar {
top: 45.5%;
}
}
@media (min-height: 1620px) {
.foobar {
top: 41%;
}
}
@media (min-height: 1890px) {
.foobar {
top: 36.5%;
}
}
@media (min-height: 2160px) {
.foobar {
top: 32%;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.