Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Other values than px do not produce the same result #1

Open
viu-x opened this issue Oct 29, 2024 · 0 comments
Open

Other values than px do not produce the same result #1

viu-x opened this issue Oct 29, 2024 · 0 comments

Comments

@viu-x
Copy link

viu-x commented Oct 29, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant