Anatomy of Responsive Web Design

In fluid grid layouts the content flows naturally within the dimensions of its parent container. This is maintained by using percentage based designs that will adjust accordingly to the current screen size in use.

The grid is divided into a specific number of columns to keep the layout clean and easy to navigate.

Resize this page to see it in action!

Media queries are filters that can be applied to CSS styles.They make it possible to change styles based on the device being used at that time. These style adjustments include: type, width, height, orientation, and resolution.

An important concept behind using media queries with responsive design is fluidity and proportions. By using relative units for our measurements we can simplify layouts and prevent components from rendering larger than the screen size.