1. Css Units: REM, VH & VW
Adrian Horsham

2. Css unit Basics
Many properties use the length values including width, margin, padding, font-size, border-width
To set a length you use a number followed by a unit of length ex. 12px, 80% or 2em
You cannot leave a space between the number or the unit or css will not read it
If you want a value of 0 you can leave it as “0” without the unit

3. Css units
Pixels are not the only units you can use when designing on the web.
Other popular units used include ems and percentages which are good for responsive design as they change with a devices size
There are many others including vh and vw that depend on a browsers size and REM which relies on the root element

4. Relative lengths

5. Putting it in context
Lets say we have a viewport of 1000px (width) by 800px (height):
vw – Represents 1% of the viewport’s width. In our case 50vw = 500px.
vh – 1% percentage of the window’s height. 50vh = 400px.
vmin – 1% percentage of the minimum of the two. In our example 50vmin = 400px since we are in landscape mode.
vmax – 1% percentage of the bigger dimension. 50vmax = 500px.

6. Css units
For some CSS properties you can use negative lengths, this is useful if you need to move something outside of it box but want to keep it grouped
When using length units you also have to keep in mind whether the length is relative or absolute.
Elements such a “px” are absolute and will always be the same
Elements like “rem” are relative and change depending on another element

7. Browser support
Before using any of the other elements it’s a good idea to check and see if you browser supports it.
If you are making a site that will be used by a large group of people it is a good idea to make sure it works on multiple browsers
Browsers also have versions so you may want to make sure something important on the site isn't only accessible on something most people don’t have.

8. Support for css units

9. Example of VH Relative to 1% of the height of the viewport
The vh unit is interesting in that 1 unit reflects 1/100th the height of the viewport
To make an element the full height of the viewport, you'd set it to width:100vw.
Example-

10. Example of Vw Relative to 1% of the width of the viewport
The vw unit is interesting in that 1 unit reflects 1/100th the width of the viewport.
To make an element the full width of the viewport, you'd set it to width:100vw.
Example-

11. Example of vmax/min You can also set things by vmin/ vmax
1vmin = 1vw or 1vh, whichever is smallest
1vmax = 1vw or 1vh, whichever is largest
This option gives you more options when resizing your browser to keep things proportional

12. Example of rem Relative to font-size of the root element
If the html font size is 25px, 1rem = 25px.
Example-

13. Is it perfect?
The Rem tag by default is 16px which is set by the html tag
Once you start dealing with big numbers 16 can be difficult to work with.
59px (target) / 16px (context) = (result)
One work around to that is to set the html tag to 62.5%
62.5% of 16= 10px which is a lot easier to work with

14. Is it perfect?
It is a step closer but still has some usability issues.
When scaling in relation to a root element or a device width things can become too big or too small at certain sizes.
Example-

15. Other Uses
Other than fonts you can use you can use vw and vh for for layout too.
If you use 100% width, it wont fill the browser as the html and body padding sizes are different across browsers
If you use 100vw, it will always take up the full width of your browser as it is based on the viewport
Example-

16. Other Uses
With the viewpoint lengths child sizes are relative to the browser and not the parent.
If you use 100% width in a container, it wont fill the whole width of browsers. Instead it fills the width of its parent
If you use 100vw in a container it will break out and take up the full width of your browser
Example-