Media Query Sample Overview

Media Query sample application demonstrates how to define different style rules for different devices using the CSS3 Media Query.

The application displays the content with different layout for different devices/screens.

  • For landscape view on mobile device, the list items are displayed in columns.
  • For portrait view on mobile device, the list items are displayed in rows.
  • For wearable device, the font size gets bigger and the logo is aligned in the center.

The following figure illustrates the main screens of the Media Query.

Figure: Media Query screens

Media Query screens

Media Query screens

Media Query screens

Source Files

You can create and view the sample application project including the source files in the IDE.

File name Description
config.xml This file contains the application information for the platform to install and launch the application.
css/style.css This file contains the CSS styling for the application UI.
index.html This is a starting file from which the application starts loading. It contains the layout of the application screens.
js/app.js This file contains the code for handling the main functionality of the application.

Implementation

The width media feature describes the width of the rendering surface of the output device.

The following media query specifies a style sheet for screen devices with a width less than 480px.

/* css/style.css */

@media screen and (max-width: 480px) {
    #menu li {
        width: 100%;
        float: none;
        margin-bottom: 25px;
    }
}

The following media query specifies a style sheet for screen devices with a width less than 360px and device pixels per CSS pixel less than 1.

The media query feature -webkit-max-device-pixel-ratio is used to specify between the mobile and wearable devices.

/* css/style.css */

@media screen and (max-width: 360px) and (-webkit-max-device-pixel-ratio: 1) {
    #header {
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    #header #logo {
        width: 150px;
        padding-left: 0;
    }

    #page {
        font-size: 1.5em;
    }

    #menu li .menu-icon {
        width: 75px;
    }

    #menu li .menu-title {
        font-size: 2em;
    }
}

The following media query specifies a style sheet for screen devices with circular UI.

The media query feature -tizen-geometric-shape is used to specify the shape of Tizen devices.

/* css/style.css */

@media screen and (-tizen-geometric-shape: circle) {
    #main {
        margin-bottom: 85px;
    }
}