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.
- 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.
|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|
- A feature detection library for applying different CSS and JS to your page depending on whether certain CSS/JS features are supported.
- 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.