Results: 1022
Relative to 1% of viewport's* larger dimension (width or height) https://youtu.be/unj9nAeYU1Q?t=291
Relative to 1% of viewport's* smaller dimension (width or height) https://youtu.be/unj9nAeYU1Q?t=291
Relative to font-size of the root element (HTML)
default HTML font-size
default HTML font-size is
16px
which we can see using dev tools:
Inspect element
-> select <html> element
-> computed styles
-> show all (checkbox)
-> search font-size
Relative to 1% of the height of the viewport
Relative to the parent element
basic HTML snippet in different IDEs
Sublime Text: by typing
<ht
autocomplete will appear and after pressing enter, inserts the following basic HTML:
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>
In VS Code, after typing
!
will be inserted the following HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
h1 {
    transform: translateY(-50%);
}
h1 {
    font-size: 7vw;
}
.box {
  width: 50vw;
  height: 100vh;
  background: gray;
  color: white;
}
Results: 1022