Converting vmax to px value?

HTML-CSS
1

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;
}
2

vmax is the percentage of the max viewport dimension
1vmax is equal to 1% of the max viewport dimension

3

I used it in the past:
https://khaledkzy.github.io/pixel-vh-vw-converter/

But it is like @ILM says, it is a percentage of the viewport dimension.
Hope this information can ba of help.

4

How would I use this?
https://khaledkzy.github.io/pixel-vh-vw-converter/

I don’t understand.

vmax is not listed on there.

Where do I put 3vmax? converting to px?

5

:scream: I submitted the wrong link. This is the link:

It explain a lot about meassures. :wink:

1 Like
6

vh is based on the viewport height

vw is based on viewport width

vmax uses the max of the two, you can use that converter

7

border: 0.25vmax

becomes:

0.25 vh & 0.25 vw ?
https://khaledkzy.github.io/pixel-vh-vw-converter/

0.25 vh to px becomes: 1.4425px

0.25 vw to px becomes: 3.2px

Then what do I do?

Do I add them together?

8

vmax is the percentage of the bigger viewport dimension, if your width is bigger than it is equal to vw, if your height is biggen than it is equal to vh

1 Like
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.