Here is a quick lesson on CSS3 units of measure. I know some have difficulty with this when starting out.

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.

Hope this helps!

Questions? Twitter: @_codemics

1,460 0 0