Media Query

Media queries are widely used on mobile devices. You can use them to modify the application style based on the device type or specific features and device parameters (such as the screen resolution). Specifically, media queries allow you to:

1. Design a layout style based on the device and app attributes.

2. Update the page layout to adapt to dynamic screen changes (for example, screen splitting or switching between landscape and portrait modes).

NOTE

The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

The media attribute uses the actual size, physical pixel, and screen resolution of the device by default. Do not confuse them with the configuration based on basic screen width 720 px.

CSS Syntax Rules

Use @media to import query statements. The rule is as follows:

@media [media-type] [and|not|only] [(media-feature)] {
  CSS-Code;
}

Example:

@media screen and (round-screen: true) { … } // The condition is met when the device screen is round.

@media (max-height: 800) { … } // Range query. CSS level 3 is used.

@media (height <= 800) { ... } // Range query. CSS level 4 is used, and the statement is equivalent to that of CSS level 3.

@media screen and (device-type: tv) or (resolution < 2) { … } // Multi-condition query that contains the media type and multiple media features.

Referencing Resources on a Page

Use @import to import a media query. The rule is as follows:

@import url [media-type] [and|not|only] [(media-feature)];

Example:

@import '../common/style.css' screen and (min-width: 600) and (max-width: 1200);

Media Type

Media Logical Operation

Media logical operators (and, or, not, and only) are used to implement complex media query. They can also be combined using comma (,). The following table describes the operators.

Table 1 Media logical operators

At MediaQuery Level 4, range query is imported so that you can use the operators including <=, >=, <, and > besides the max- and min-operators.

Table 2 Logical operators for range query

Media Features

Sample Code

<!-- xxx.hml -->
<div>
  <div class="container">
    <text class="title">Hello World</text>
  </div>
</div>

/* xxx.css */
.container {
  width: 300px;
  height: 600px;
  background-color: #008000;
}

@media (device-type: wearable) {
    .container-inner {
        justify-content: center;
        align-items: center;
        padding: 40px 26px;
    }

    .title {
        text-align: center;
    }

    .detail_text {
        max-lines: 2;
        text-align: center;
    }
}

@media (device-type: tv) {
    .title {
        font-size: 16px;
    }

    .detail_text {
        font-size: 12px;
    }
}

@media (device-type: car) {
    .title {
        font-size: 12px;
        color: #FFFFFF;
        font-family: @id_text_font_family_medium;
    }

    .detail_text {
        font-size: 12px;
        margin-top: 2px;
        font-family: @id_text_font_family_regular;
        color: #FFFFFF;
    }
}