Monday 13 October 2014

CSS measurement unit

CSS has two forms of measurement, absolute and relative. As a general rule, relative units are preferentially used for responsive and mobile design; absolute units tend to be used for fixed-width designs.
AbsoluteRelative
CSS Unit CSS AbbreviationCSS UnitCSS Abbreviation
PixelspxPercent%
PointsptEmem
InchesinExex
CentimeterscmRoot emrem
PicaspcViewport widthvw


Viewport heightvh


Viewport minimumvm


characterch


Gridgd
rem, vh, vw are CSS3 measurement units, supported by modern browsers.
1em is the width of the m character in the default font set for that browser. (ex is the height of the x character in a font). rem allows you to set a root font size for size for the entire page, with sizes for elements relative to this measurement:
html { font-size: 62.5%; }
body { font-size: 1.4rem; }
h1 { font-size: 2.4rem; }
(The measurements above are used because they map exactly to pixels: with a base font-size of 62.5% for a page, the body size maps to 14 pixels, and h1 to 24 pixels.)
The viewport is the browser window: vh, vw and vm can scale elements to its current size. This could be used to restrict the upper scaled size of images, for example:
img { max-width: 90vw; }
ch is the equivalent of em, but applied to the width 0 numeral of the chosen font.
gd relates to the CSS3 grid; unfortunately, only IE10 browser yet supports the grid module at this time.
You never need to specify units when declaring a value of 0: zero centimeters is the same as 0 pixels. In all other cases, units of measurement should be declared 2em, 2px, etc, not 2.
With the exception of pixels, all systems of measurement can take floating point values: 2.25em, 5.3cm, etc.
Generally speaking, CSS written for screen display devices should use relative units (percent, em and ex), with few exceptions (such as fixed-with bitmapped images, and hairlines (i.e. 1 to 5 pixel width borders)).

No comments:

Post a Comment