Css Units: REM, VH & VW Adrian Horsham

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

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

Relative lengths

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.

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

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.

Support for css units

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- http://codepen.io/24seven/pen/vKkJPd

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- http://codepen.io/24seven/pen/NAgvkm

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

Example of rem Relative to font-size of the root element If the html font size is 25px, 1rem = 25px. Example- http://codepen.io/24seven/pen/rLwzXV

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) = 33.5625 (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

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- http://codepen.io/chriscoyier/full/tvheK/

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- http://codepen.io/24seven/pen/KrvpWK

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- http://codepen.io/24seven/pen/yJoNjO