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.