Adaptive Design is an approach to Web design that utilizes fluid layouts, CSS3 media queries, and custom scripting to effectively display content at any screen resolution. Website elements’ sizes are based on relative values such as percentages or em values rather than pixels or points. This allows content to resize as the browser window does. CSS3 takes this approach one step further with the introduction of media queries.
Media queries are conditional statements that call upon predefined styles or stylesheets based on the device used to access a Website. For instance, smartphones are not suited for columnar data. Therefore, Websites that cater to the smartphone screen size display content in a linear fashion. Media queries allow you to define conditional styles for any resolution and, in the case of the iPad, orientation as well.
Desktops, smartphones and tablets can all have variations in screen resolutions. Creating an application using Adaptive Design with media queries can ensure that your content is displayed as intended, without creating dozens of different applications or stylesheets.