Creating a fluid layout

Responsive designs work best with a fluid layout, using percentages to define widths of elements on the page instead of pixels. This is because of the following reasons:

  • Fluid layouts will resize to smaller (and larger) screens without elements overlapping or getting lost
  • Fluid layouts work much better than fixed ones when media queries are applied to them, as we will see later

Let's look at the layout styling for the Carborelli's site to see if it's fluid.

As we shall see in a moment, the Carborelli's site currently has a fixed-width layout, like many websites at the time of writing. This means that all layout dimensions are set in pixels and don't change when the size of the browser window changes.

上一章目录下一章