CSS3: Units of Measure 101

Posted on Aug 25 2014 - 4:03pm by Eric Tompkins
  • CSS3

Here is a quick lesson on CSS3 units of measure:

px -Pixel is exactly as described. It allows you to define size based on number of pixels. ie: 5px

em – em’s is the width of the letter M. If font size changes, this size will change in relation to the font size. em’s are relative to the parents font size. Example: If you apply a font size to a div, em’s would change relative to the div’s font size, not the document.

rem – rem’s are same as em’s except that they are relative to font size of entire document, not the parent.

% – Percentage sizes to given percentage of the parent. Example: width=5%; sizes to 5% of the parents width.

Still Experimental (buggy):

vw – Viewport Width – Resizes based on the viewport width (example: 5vw;), resizing the width of an open window, vw will change based on the windows size.

vh – Viewport Height – Resizes based on the parents height (example: 5vh;), same as above except it will adjust based on windows height.

vmin – Viewport Minimum – Resizes to the minimum width or height of the viewport. Calculates which is smaller and bases size on that number.

vmax – Viewport Maximum – Resizes to the maximum width or height of the viewport. Calculates which is larger and bases size on that number.

Questions?  Twitter: @_codemics

About the Author

Eric Tompkins is an Experienced Web Developer and Digital Media Professional. As well as a Professional Photographer and Technical Instructor. You can follow on Twitter @_codemics.