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;
}
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?
If the viewport is 1280 x 720
3vmax in px would be, or translate to what?
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.
It only says vmax, there is no px value.
Using math, is there a way to figure it out?
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
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?
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.