# Media Queries 2+

With media queries, developers can adjust the styles of JS applications based on the values or presence of various device characteristics and parameters.

Media queries are part of responsive design. Similar to CSS, you can use the @media at-rule to conditionally apply part of a stylesheet based on the results of media queries; you can also use @import to conditionally apply an entire stylesheet.

Minimum aiot-toolkit version: 1.1.3

# Syntax

Each media query statement consists of an optional media type and any number of media feature expressions. Multiple media query statements can be combined using various logical operators, and media query statements are case-insensitive.

There are two ways to perform media queries:

# Introducing media queries using the @media method

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

# Examples

@media (max-width: 30) { ... } // Level 3 syntax.
@media (width <= 30) { ... } // Level 4 syntax, clearer and more concise than Level 3.
@media screen and (min-width: 400) and (max-width: 700) { ... } // Multi-condition syntax.
@media (400 <= width <= 700) { ... } // Multi-condition Level 4 syntax.

# Introducing media queries using the @import method 3+

@import './css_file_name.css' [media type] [and|not|only] [(media feature) ];

# Media Types

Media types describe the category of the device. Except when using the not or only logical operators, where the media type must be included, the media type is optional. The currently supported media types for JS applications are as follows:

Media Type	Description
screen	Primarily used for screens.

# Media Features

Media feature expressions are entirely optional and are responsible for testing whether these features or characteristics are present and what their values are.

Each media feature expression must be enclosed in parentheses.

The currently supported media features for JS applications are as follows:

Type	Description	Units Required for Query	Supported Units
height3+	Defines the height of the visible area of the page on the output device	No	dp
min-height3+	Defines the minimum height of the visible area of the page on the output device	No	dp
max-height3+	Defines the maximum height of the visible area of the page on the output device	No	dp
width3+	Defines the width of the visible area of the page on the output device	No	dp
min-width3+	Defines the minimum width of the visible area of the page on the output device	No	dp
max-width3+	Defines the maximum width of the visible area of the page on the output device	No	dp
aspect-ratio3+	Defines the aspect ratio of the visible area of the page on the output device. The ratio value should be in the format of x/y, e.g., 1/2	No	None
min-aspect-ratio3+	Defines the minimum aspect ratio of the visible area of the page on the output device. The parameter requirements are the same as above	No	None
max-aspect-ratio3+	Defines the maximum aspect ratio of the visible area of the page on the output device. The parameter requirements are the same as above	No	None
device-type3+	The optional values for device-type are: watch, band, smartspeaker. The default value is watch	No	None
shape2+	Screen shape. Optional values: circle, rect, pill-shaped3+	No	None

# Notes

In the media feature list, media features marked as "no units required for query," such as width and height, should not include length units in queries, and the length unit can only be dp.

dp value = physical resolution / device pixel ratio (DPR)

Example: A device with a resolution of 480*480 and a DPR of 2 has a screen width of 480 pixels = 240dp.

Reference data for various devices

Device Type	Device Model	Screen Shape	Screen Size	Resolution	PPI	DPR	Horizontal DP Value
Watch	Xiaomi Watch S1 Pro	Circle	1.47 inches	480x480	326	2.0	240
Watch	Xiaomi Watch H1	Circle	1.43 inches	466x466	326	2.0	233
Watch	Xiaomi Watch S3	Circle	1.43 inches	466x466	326	2.0	233
Band	Xiaomi Band 8 Pro	Rectangle	1.74 inches	336x480	336	2.1	168
Band	Xiaomi Band 9	Pill-shaped	1.62 inches	192x490	325	2.0	96

Example code:

// The following media query will take effect on Xiaomi Band 9, which has a resolution of 192*490 and a horizontal DP value of 96
@media (min-width: 80) and (max-width: 160) {
  .box {
    background-color: green;
  }
}

// The following media query will take effect on Xiaomi Band 8 Pro, which has a resolution of 336*480 and a horizontal DP value of 168
@media (min-width: 160) and (max-width: 200) {
  .box {
    background-color: yellow;
  }
}

// The following media query will take effect on Xiaomi Watch S3, which has a resolution of 466*466 and a horizontal DP value of 233
@media (min-width: 200) and (max-width: 300) {
  .box {
    background-color: red;
  }
}

# Logical Operators 3+

Developers can use logical operators to combine multiple media feature query conditions and write complex media queries.

Type	Description
and	The and operator is used to combine multiple media features into a single media query. The query is true if each linked feature returns true.
not	The not operator is used to negate a media query. If the query does not return false, it returns true. If it appears in a comma-separated list, it only negates the specific query to which it applies. If the not operator is used, an explicit media type must be specified. For example: not screen and (min-width: 400) and (max-width: 700). Note: The not keyword cannot be used to negate a single feature expression; it acts on the entire media query.
only	The only operator is used to apply styles only when the entire query matches. Watch applications will ignore the only keyword when processing keywords starting with only. If the only operator is used, a media type must be specified. For example: only screen and (min-width: 400) and (max-width: 700).
, (comma)	The comma-separated effect is equivalent to the or logical operator. When using comma-separated media queries, if any of the media queries return true, the styles are valid. For example: (width >= 192), (height >= 490).
or	The or operator is used to combine multiple media feature comparison statements into a single media query statement. The query is true if any of the media feature comparison statements return true. For example: (min-width: 400) or (max-width: 700).
<=	Less than or equal to. For example: (400 <= width).
>=	Greater than or equal to. For example: (500 >= height).
<	Less than. For example: (400 < width).
>	Greater than. For example: (500 > height).

# Example Code

Query for devices with a circular or pill-shaped screen

  .box {
    width: 100px;
    height: 100px;
    background-color: black;
  }

  @media (shape: circle) or (shape: pill-shaped) {
    .box {
      background-color: green;
    }
  }

Query for devices that are watches and have a circular screen

  .box {
    width: 100px;
    height: 100px;
    background-color: black;
  }

  @media (device-type: watch) and (shape: circle) {
    .box {
      background-color: green;
    }
  }

# Support Details

Device Product	Description
Xiaomi S1 Pro Sports Health Watch	Not supported
Xiaomi Band 8 Pro	Not supported
Xiaomi Band 9 / 9 Pro	Supports 2+ features
Xiaomi Watch S3	Supports 2+ features
Redmi Watch 4	Not supported
Xiaomi Wrist ECG Blood Pressure Monitor	Not supported
Xiaomi Band 10	Supported
Xiaomi Watch S4	Supported
REDMI Watch 5	Supported

← Page Styling and Layout Global Attributes and Methods →