Si tengo algunas consultas de medios que establecen un valor basado en el ancho de pantalla actual, ¿cómo puedo automatizar el cálculo de n pasos intermedios ?
Como ejemplo: si tuviera un valor máximo del 50 % a 1080p y un valor del 32 % a 2160p, debería poder calcular 4 pasos intermedios:
@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%; }Estoy interesado en cualquier tipo de solución posible: CSS puro, Sass, JS, etc.
(Además, ¿podría ser posible este tipo de cálculo para valores no lineales?)
Podría usar un mixin para generar los pasos, sería un bucle @for básico.
Dependiendo de la flexibilidad que desee para la mezcla, necesitará algunos argumentos:
$stepsNb$minWidthQuery$maxWidthQuery$property$minValue$maxValueEntonces el mixin calculará los pasos por ti:
@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); } } }Lo usarías así:
.foobar { @include interpolateSteps($property: top, $minValue: 50%, $maxValue: 32%); }Y saldría:
@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%; } }