Editing Responsive Design

==Overview==
Responsive web design has become increasingly important as the amount of mobile traffic now accounts for more than half of total internet traffic. It is now a standard feature of many website design and development projects.

This approach aims at providing an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
==Usage Types==
There are several key elements to consider in responsive web design:
===Fluid Grids===
Fluid grids are a key principle in responsive design. They use relative sizing to fit the content to the device’s screen size. The term "grid" is a little misleading because they're actually more like proportion-based tables.
===Flexible Images===
Flexible images are also sized in relative units so as to prevent them from displaying outside their containing elements. This can be achieved using CSS with the max-width property set to 100%.
===Media Queries===
Media queries, introduced in CSS3, allow the content to respond to different conditions such as screen resolution (e.g. smartphone screen vs. computer screen). They can be used to change the layout sizes and rules, depending on the capabilities of the device.