Your Search Results

    Layout and structure

    Our volunteers haven't translated this article into ไทย yet. Join us and help get the job done!

    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

    Contributors to this page: kohei.yoshino, chrisdavidmills
    Last updated by: kohei.yoshino,