All of the responsive tools and practices we have reviewed so far helped us utilize what is natural to the Web. HTML websites are naturally responsive. If we create a basic website, such as the following example, the site will naturally shrink and stretch to meet the browser's width. RWD builds on top of this function rather than halting it.

To keep a website responsive, stay away from using pixel widths on elements. Instead use ems and percentages. We should use ems for font sizes too. CSS Guru, Chris Coyier, in "Why Ems?" (https://css-tricks.com/why-ems/), sums up why we should do this.

With ems, all sizes set are relative to its parent's font size. Let's say there is an h1 tag whose parent is a div tag; the font size of h1 will be relative to the div font size. If we increased the div tag's font size, the h1 font size would increase also. Another value is root ems, or rems. Rems are relative always to the body tag's font size. For both, if we needed to increase the font size overall on smaller screens, we can use media queries to change the body element's font size.

By setting the width of sections on a page using percentages instead of pixels, we can see the natural fluidity of web pages. The following is an example of a two-column layout using only percentages. This may seem familiar to you.

HTML

<div class="col-1">
</div>

<div class="col-2">
</div>

CSS

.col-1, .col-2 {
  margin:0;
  float: left;
  width: 50%;
  height: 600px;
}
.col-1 {
  background-color: darkgray;
}
.col-2 {
  background-color: cadetblue;
}

Here, we are using the .col-1 and .col-2 classes (col is short for column) to align the sections and set the widths. We then use these classes to set background colors as well. We also gave the columns a height so that we can actually see them appear on the page (the default height would be 0 pixels).

You may recall categorizing website layouts into three types: fixed, fluid, and adaptive. A website locked at 960 pixels wide has a fixed layout. Percentage-based layouts, such as the preceding example, are fluid. Adaptive layouts are fixed layouts that use media queries to change at different screen sizes. Now, you might be thinking that adaptive layouts are the same as responsive layouts. Even the terms for each are similar. Responsive layouts do use media queries too, but their layouts are based on percentages instead of being fixed. Responsive layouts scale based on a percentage-based grid. Adaptive layouts only snap to new layouts at different sizes.