Estoy tratando de establecer un mínimo de 100 y un máximo de 300 % del tamaño de fuente en css, pero tengo problemas para calcular correctamente:
{#if historyTags.length} <h3>Popular jobs searched by users</h3> <ul class="tags-list"> {#each historyTags as tag} <li style={`font-size: ${ tag.count === minFont ? minFont : (tag.count / maxFont) * (maxFont - minFont) + minFont }%;`} > <a href="/searches/history/tags/{tag.word.toLowerCase()}" >{tag.word.toLowerCase()} ({tag.count})</a > </li> {/each} </ul> {/if} El tamaño de fuente debe estar entre 100% y 300% , pero obtengo 1170%
Esto depende completamente de la asignación que desee utilizar. Por ejemplo, si desea que el tamaño aumente linealmente con el número de usos, necesita la ecuación de la función lineal :
f(x) = m * x + t Con los dos puntos de datos dados, puede determinar sus constantes m y t :
100 = m * min + t 300 = m * max + t m = (100 - t) / min 300 = ((100 - t) / min) * max + t t = 300 - ((100 - t) / min) * max t = 300 - ((100 - t) * max) / min t = 300 - (100 * max - t * max) / min t = 300 - ((100 * max) / min - (t * max) / min) t = 300 - (100 * max) / min + (t * max) / min t - (t * max) / min = 300 - (100 * max) / min (t * min) / min - (t * max) / min = 300 - (100 * max) / min (t * min - t * max) / min = 300 - (100 * max) / min (t * min - t * max) / min = (300 * min - 100 * max) / min t * min - t * max = 300 * min - 100 * max t * (min - max) = 100 * (3 * min - max) t = 100 * (3 * min - max) / (min - max) m = (100 - (100 * (3 * min - max) / (min - max))) / min m = ((100 * (min - max)) / (min - max) - (100 * (3 * min - max) / (min - max))) / min m = ((100 * (min - max) - (100 * (3 * min - max)) / (min - max))) / min m = ((100 * (min - max) - (100 * (3 * min - max)) / (min - max))) / min m = ((100 * min - 100 * max - (300 * min - 100 * max)) / (min - max)) / min m = ((100 * min - 100 * max - 300 * min + 100 * max) / (min - max)) / min m = ((-200 * min) / (min - max)) / min m = (-200 * min) / ((min - max) * min) m = -200 / (min - max)Entonces, la fórmula genérica en relación con los recuentos de uso correspondientes a los tamaños mínimo y máximo es:
f(x) = (-200 / (min - max)) * x + 100 * (3 * min - max) / (min - max)(La función también genera valores por debajo y por encima de 100/300, por lo que es posible que deba aplicar un mínimo/máximo).
Tal vez desee que el tamaño crezca más rápidamente o que disminuya, entonces sería mejor algo como una función cuadrática o logística .
Si arregla algunas o todas las variables requeridas con anticipación, usar las ecuaciones no será tan complicado. Por ejemplo, usando el crecimiento lineal, comenzando en 0 con un conteo máximo variable, simplemente obtienes:
100 = m * 0 + t 300 = m * max + t t = 100 300 = m * max + 100 300 - 100 = m * max m = 200 / max f(x) = x * (200 / max) + 100