CSS Units
On the web there are a few measuring units, which to the untrained eye translate to nothing as they don’t actually exist.
CSS units are all variable and are somewhat abstract. Here I will look at the available options, the support for these options, and also the best practices that I try to follow and why. (This was originally posted here).
Pixels
Noted as ‘px’, the most common and easiest to understand. It’s relative to the users device resolution an iPhone for example will be 320px wide. The exception to the case is retina displays which pack 4 times the amount of pixels into a standard pixel, therefore a retina pixel is known as an x2 or @2 pixel, in this case a retina iPhone would be 640px wide.
Browser support? All.
%
Percentage or ‘fluid’ values are a prominent technique used in responsive web design. By using percentages you can constantly achieve 75% of a screen without having to add additional overhead calculating pixel widths. Percentage heights can also be defined but other techniques are required to harness accurate 100% height on the document > body level.
Browser support? All.
em
The em is a relative unit, based upon the parent element. The most common scenario for em use is with font-size. The base font size will be set to a value, usually 16px as a root size on the body. Any children of this element that define the font-size will inherit the 16px with the value 1em. Giving it a value of 1.1em would increase the font size by 0.1em/2px to be 18px. A child of the element defined 1.1em would also increase by 0.1em to be 19px.
Browser support? According to http://www.browsersupport.net/CSS/em_%5Bem_unit%5D
* IE6+
* Firefox 1+
* Chrome 1+
* Safari 1+
rem
The rem is short for ‘root-em’ so instead of it inheriting the parents font-size, it always takes the value of the base font-size. So following the same structure of the `em` example. If the base font-size is 16px, giving a child element (lets call it Bob) a font-size value of 1.1em would give the value 18px. If we gave a child of this element (Bob) a font-size value of 1.1em the value would still be 18px. Not 19px like the previous example.
Browser support? Not bad…
* IE9+
* Firefox 22+
* Chrome 28+
* Safari 5.1+
* iOS4+
vw & vh
The vw & vh are very new units, shiny new. Like when you have that piece of sticky plastic on the front of your phone, that kind of new. vw & vh units are percentage proportions of the viewport.
A vw is representative of the viewport width, and vh is representative of the viewport height. Okay? cool.
So 1vw/vh is 1% of the viewport and 100vw/vh is the full width/height or 100%. A good use case for this is centrally aligned content that has to remain absolutely central in all cases.
Previously we would have had to use javascript to achieve this technique, now thanks to vw&vh we no longer have to!
Browser support? Meagre..
* IE10+
* Firefox 19+
* Chrome 20+
* Safari 6+
* iOS6+
