Fluid Dimensions

So far we have been building our web pages with fixed dimensions. Our sizes have been determined by pixels. That was the old way of building websites when screen sizes were more uniform. Modern websites are viewed on a variety of screen sizes and we want our content to begin to fit to the window it is being viewed in. We will begin to utilize percentages, em, and rem to make our site fluid. To be a proper fluid web site the content should be adjusting and flowing according to the viewport between media breaks.

bruce lee

EM

An em is a unit in the field of typography, equal to the currently specified point size. For example, one em in a 16-point typeface is 16 points. Therefore, this unit is the same for all typefaces at a given point size. Typographic measurements using this unit are frequently expressed in decimal notation (e.g., 0.7 em) or as fractions of 100 or 1000 (e.g. 70/100 em or 700/1000 em). The name "em" was originally a reference to the width of the capital "M" in the typeface and size being used, which was often the same as the point size. Learn more

REM

CSS3 introduces a few new units, including the rem unit, which stands for "root em". The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that. Learn more

Percentage

The percentage CSS data types represent a percentage value. Many CSS properties can take percentage values, often to define sizes in terms of parent objects. Percentages are formed by a number immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn't a space between the '%' and the number. Many length properties use percentages, such as width, margin and padding. Percentages can also be seen in font-size, where the size of the text is directly related to the size of its parent. Learn more

Box Sizing

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

Values:

  • content-box
  • padding-box
  • border-box
Learn more

VW

Often times, there are certain elements within our design that we'd like to ensure can fit into the viewport in their entirety. With vw/vh, we can size elements to be relative to the size of the viewport. The vw/vh units are interesting in that 1 unit reflects 1/100th the width of the viewport. To make an element the full width of the viewport, for example, you'd set it to width:100vw. Learn more