Converting vmax to px value?

How is that able to be done?

What is the math that is done?

viewport is: 1280 x 720

	width: 3vmax;
	height: 3vmax;
	left: calc(50% - 1.5vmax);
	bottom: -3.95vmax;
	border: 0.25vmax solid #4e4e4e;
	box-shadow: 0 0 1vmax 0px #272727, 0 0 0.5vmax 0.1vmax #000 inset;
}
1 Like

Depends on the height of the viewport. Read about vmax here: https://thenewcode.com/1137/MinMaxing-Understanding-vMin-and-vMax-in-CSS

Also, why do you want to do this?

1 Like

If the viewport is 1280 x 720

3vmax in px would be, or translate to what?

1 Like

If you open your browser “inspect” tool and select it then you should see it outlined with pixel dimensions in it’s current computed state. Of course it will change as your viewport size changes.

2 Likes

It only says vmax, there is no px value.

Using math, is there a way to figure it out?

Not on my FF inspector, it does what I already explained.

did you read the article listed above?
If so, what measure is being used when you say vmax in a 1280x720?
What is 3vmax in that scale?

vmax uses the largest of the viewport width or height, so it will choose 1280 in that regard.

With my vw at 1280 (less the scrollbar space) …

I get 38.4px

Where would I find the px value of this one?
border: 0.25vmax solid #4e4e4e;

Well if your still working from 1280px and 3vmax was computed to 38.4 you should be able to take it from there.

38.4 * 3 = 12.8px (1vmax)
12.8 * 4 = 3.2px (.25vmax)

3px

1 Like

To put it in mathematical notation

vmax = max(viewportWidth, viewportHeight) * 0.01;
vmin = min(viewportWidth, viewportHeight) * 0.01;

So, the max of 1280px and 720px is 1280px, so in that case 1vmax = 0.01 * 1280 = 12.8px

Once you know that it becomes easy

Nvmax = N * 12.8px

So for example 3vmax = 3 * 12.8 = 38.4, 0.25vmax = 0.25 * 12.8 = 3.2px, etc

I’m still not sure why you want to know, as the whole point of vmin and vmax is to do relative sizing with respect to the viewport, why do you care what that becomes in absolute numbers?

3 Likes