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
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;
}
}