Responsive design

Responsive web apps use technologies like media queries and viewport to make sure that their UIs will fit any form factor: desktop, mobile, tablet, or whatever comes next.

Core guides

The building blocks of responsive design
Learn the basics of responsive design, an essential topic for modern app layout.
Mobile first
Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.

Technologies

Technology Description Support summary Latest spec
Media queries Defines expressions allowing styling to be selectively applied to content depending on viewport size, resolution, orientation, etc. Widespread across modern browsers (more detail) Media Queries Level 4
@viewport/viewport meta tag Controls viewport settings, primarily on mobile devices. @viewport: Experimental (more detail)
Viewport meta tag: Widespread across modern mobile devices
CSS Device Adaptation Module Level 1
Flexbox A very useful CSS feature for creating flexible, responsive layouts. Widespread across modern browsers (more detail) CSS Flexible Box Layout Module Level 1

Tools

Modernizr
A feature detection library for applying different CSS and JS to your page depending on whether certain CSS/JS features are supported.
css3-mediaqueries-js
A JavaScript polyfill to add Media Query support to old versions of IE (5+.)

See also

Graphics for responsive sites
Ideas to keep in mind when designing graphics for responsive sites and applications.
Responsive navigation patterns
How do you make a UI that looks and works as great on a smartphone as it does on the desktop? Learn how to design UIs that change to fit your user's screen.

Document Tags and Contributors

 Contributors to this page: bunnybooboo, Sheppy, chrisdavidmills
 Last updated by: bunnybooboo,