You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've used your plugin with px values in several projects now without problems and loving it.
In a current project I need rem values and those do not work properly at all.
Assuming a base font size of 16px = 1rem; The following produce totally different results:
:root {
--design-min:800;
--design-max:1440;
/* generated values */--fv-calc: (100vw-var(--design-min)*1px) /(var(--design-max) -var(--design-min));
--2-4rem:clamp(2rem,calc(2rem+2*var(--fv-calc)),4rem);
--32-64:clamp(32px,calc(32px+32*var(--fv-calc)),64px);
}
h1 {
/* this renders everything perfectly */font-size:var(--32-64);
/* here the lower limit is equal to 32px, but the interpolation up to --design-max and the maximum size do not correspond. if I resize my viewport to 5000px wide, then I only get a calculated value of 45.125px. Far away from the desired 64px or 4rem. and I think it has to do with the value of --fv-calc which results in a px value but then gets added to a rem value. */font-size:var(--2-4rem);
}
For a 100vw = 1920px the value of --fv-calc results in 1.75px. Therefore the value of the calc function inside clamp results in 35.5px.
The text was updated successfully, but these errors were encountered:
I've used your plugin with px values in several projects now without problems and loving it.
In a current project I need rem values and those do not work properly at all.
Assuming a base font size of
16px = 1rem
; The following produce totally different results:For a
100vw = 1920px
the value of--fv-calc
results in1.75px
. Therefore the value of thecalc
function insideclamp
results in35.5px
.The text was updated successfully, but these errors were encountered: