A series of articles to help you create the perfect structure for your Open Web App.
- The building blocks of responsive design
- Learn the basics of responsive design, an essential topic for modern app layout.
- Media queries
-
One of the most important technologies in responsive app design is the media query. Media queries allow your app to respond to screen size, resolution, device orientation, and many other environment variables using declarative CSS rules or JavaScript listeners. Also see Using media queries and
MediaQueryList. - 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.
- Flexible boxes
- CSS flexible boxes let you configure your app's user interface to automatically adjust the positioning and sizes of elements based on the size and orientation of the display.
Note: If you are developing Firefox OS apps, be aware that multi-line flexboxes are supported in Firefox OS 1.3+; for older versions you might have to adopt a simpler layout or provide a fallback.
Document Tags and Contributors
Tags:
Contributors to this page:
chrisdavidmills,
kohei.yoshino
Last updated by:
chrisdavidmills,