Monday, April 20

The Length of CSS (Measurement units in CSS)

Disclaimer : Read css-tricks.com or MDN for in depth knowledge about length of CSS. This post is just a documentation of my day-to-day learning. I am documenting it here as a blog post for my own future reference.

While creating shapes or inserting images or anything visual in your web page you require to use CSS measurement units such as “px” etc. Below is what I know
  1. “px” is for pixels, most commonly used. While converting designs from psd files, I normally would look for pixels and then apply the same measurement in my CSS document.
  2. “em” another measurement units, lets say if you have a child “p” tag inside a “div” tag and if the “div” is of font-size “16em” then your “p”'s font size would be relative to your parent element. Usually used in responsive web design.
  3. “rem” is same as “em” but with functionality that all the child elements are in relation to the “rem” defined to the main root element.
  4. “%” ie percentage, I've usually used in scenarios where images needs to be 100% width and it automatically scales in different resolutions, also giving width to table data elements.

Research from Internet

We have absolute units and relative units
Absolute Units : cm, mm, in, px are absolute units. The value that you give is same across all the different devices. The absolute units are normally used for print devices instead of display devices. They can also be used across high resolution devices.

px is the most widely used, best thought as device pixels.

in (inch) are physical measurement but in CSS they directly map to pixels. 1 in == 96px.

cm are physical measurement but in CSS map to pixels. 1Cm == 37.8px

mm 1mm == 0.1cm == 3.78px

Relative units such as em and ex depend on the font and may be different for element in the screen. Em is widely used, ex rarely used. The purpose of ex is to express sizes that must be related to the x-height of the font.

EM is a typographic measurement, normally used over font sizes. The idea is to use it in relation to the device default size. So for example, if you define your h1 to 2.5em, then it means that your h1 is 2.5 times your device size. Thus the font readability is adjusted on different devices.
1em == 16px

Point to note : em units multiply upon themselves when applied to font-size. So if an element has font size 1.1em and within it there is another element which has font size 1.1em followed by another element of font-size 1.1em, then the resulting size is 1.1x1.1x1.1 which is 1.331em.

REM is a relative unit like em but it is always in relation to the root element ie. :root {}

Points ie. pt is usually used for print media instead of display.

Pica is same as points however 1pc == 12pt

ch is based on the width of zero (0) considering the x-height.

The viewport lenghts

vw is the viewport width and 1vm is equal to 1% of the width of the viewport. It is similar to percentage however it the value remains consistent regardless of the parent element.

vh is the viewport height for the device.

There is also vmax and vmin, 
 
What I learned
  1. It is not exactly measurement units, it is called as the length of CSS.
  2. There are two types of measurements, absolute and relative.
  3. There are various types of units available but most common and widely used are px, rem, em. However you can use pt to have your webpage on print media.
  4. Take care when using em and rem. Em is relative to the parent element whereas rem is relative to the root element.
  5. Percentage is not technically a length unit. You can refer https://css-tricks.com/the-lengths-of-css/ for more details.

Be the first one to Comment!!!

Post a Comment