fixed acad3b0f from https://gitee.com/esterzhou/docs/pulls/14570

update docs (14015)
Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/application-dev/reference/arkui-js/js-components-common-mediaquery.md

@@ -64,11 +64,11 @@ Media logical operators (and, or, not, and only) are used to implement complex m
 
 | Type      | Description                                      |
 | -------- | ---------------------------------------- |
-| and      | The **and** operator is used to combine multiple media features into a media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.<br>For example, **screen and (device-type: wearable) and (max-height: 600)** indicates that the query is valid when the device is a wearable and the maximum height of the application is less than or equal to 600 pixels.|
-| not      | The **not** operator is used to perform a logical negation for a media query. **true** is returned if the query condition is not met. Otherwise, **false** is returned. In a media query list, logical negation is performed only for the media query using the **not** operator.<br>For example, **not screen and (min-height: 50) and (max-height: 600)** indicates that the query is valid when the height of the application is less than 50 pixels or greater than 600 pixels.<br>You must specify the media type when using the **not** operator.|
+| and      | The **and** operator is used to combine multiple media features into one media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.<br>For example, **screen and (device-type: wearable) and (max-height: 600) ** evaluates to true when the device type is wearable and the maximum height of the application is 600 pixel units.|
+| not      | The **not** operator is used to perform a logical negation for a media query. **true** is returned if the query condition is not met. Otherwise, **false** is returned. In a media query list, logical negation is performed only for the media query using the **not** operator.<br>For example, **not screen and (min-height: 50) and (max-height: 600) ** evaluates to true when the height of the application is less than 50 pixel units or greater than 600 pixel units.<br>You must specify the media type when using the **not** operator.|
 | only     | The **only** operator applies the selected style only when the entire expression is matched. It can be used to prevent ambiguity on browsers of earlier versions. The statements that contain both media types and media features produce ambiguity when they are received by some browsers of earlier versions. For example:<br>screen and (min-height: 50)<br>The browsers of earlier versions would mislead this sentence into **screen**, causing the fact that the specified style is applied when only the media type is matched. In this case, the **only** operator can be used to avoid this problem.<br>You must specify the media type when using the **only** operator.|
-| ,(comma) | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true. The effect of a comma operator is equivalent to that of the **or** operator.<br>For example, **screen and (min-height: 1000), (round-screen: true)** evaluates to true when the application height is greater than or equal to 1000 pixels or the device screen is rounded.|
-| or       | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.<br>For example, **screen and (max-height: 1000) or (round-screen: true)** evaluates to true when the application height is less than or equal to 1000 pixels or the device screen is rounded.|
+| ,(comma) | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true. The effect of a comma operator is equivalent to that of the **or** operator.<br>For example, **screen and (min-height: 1000),  (round-screen: true) ** evaluates to true when the minimum height of the application is 1000 pixel units or the device screen is round.|
+| or       | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.<br>For example, **screen and (max-height: 1000) or  (round-screen: true)** evaluates to true when the maximum height of the application is 1000 pixel units or the device screen is round.|
 
 At MediaQuery Level 4, range query is imported so that you can use the operators including &lt;=, &gt;=, &lt;, and &gt; besides the max- and min-operators.
 
@@ -76,10 +76,10 @@ At MediaQuery Level 4, range query is imported so that you can use the operators
 
 | Type   | Description                                      |
 | ----- | ---------------------------------------- |
-| &lt;= | Less than or equal to, for example, **screen and (50 <= height)**.|
-| &gt;= | Greater than or equal to, for example, **screen and (height >= 600)**.|
-| &lt;  | Less than, for example, **screen and (50 < height)**.|
-| &gt;  | Greater than, for example, **screen and (600 > height)**.|
+| &lt;= | Less than or equal to, for example, **screen and (height &lt;= 50)**.|
+| &gt;= | Greater than or equal to, for example, **screen and (height &gt;= 600)**.|
+| &lt;  | Less than, for example, **screen and (height < 50)**.|
+| &gt;  | Greater than, for example, **screen and (height > 600)**.|
 
 
 ## Media Features
@@ -92,10 +92,10 @@ At MediaQuery Level 4, range query is imported so that you can use the operators
 | width                  | Width of the display area on the application page.                            |
 | min-width              | Minimum width of the display area on the application page.                          |
 | max-width              | Maximum width of the display area on the application page.                          |
-| resolution             | Resolution of the device. The unit can be dpi, dppx, or dpcm. Where:<br>- **dpi** indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.<br>- **dpcm** indicates the number of physical pixels per centimeter. 1 dpcm ≈ 2.54 dpi.<br>- **dppx** indicates the number of physical pixels in each pixel. The unit is 96 px = 1 inch, which is different from the calculation method of the pixel unit on the page. 1 dppx = 96 dpi.|
+| resolution             | Resolution of the device. The unit can be dpi, dppx, or dpcm. <br>- **dpi** indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.<br>- **dpcm** indicates the number of physical pixels per centimeter. 1 dpcm ≈ 2.54 dpi.<br>- **dppx** indicates the number of physical pixels per pixel. (This unit is calculated based on this formula: 96 px = 1 inch, which is different from the calculation method of the px unit on the page.) 1 dppx = 96 dpi. |
 | min-resolution         | Minimum device resolution.                               |
 | max-resolution         | Maximum device resolution.                               |
-| orientation            | Screen orientation.<br>Options are as follows:<br>- **orientation: portrait**: portrait screen orientation<br>- **orientation: landscape**: landscape screen orientation|
+| orientation            | Screen orientation.<br>Options are as follows:<br>- orientation: portrait<br>- orientation: landscape|
 | aspect-ratio           | Ratio of the width to the height of the display area on the application page.<br>Example: **aspect-ratio:1/2**|
 | min-aspect-ratio       | Minimum ratio of the width to the height of the display area on the application page.                    |
 | max-aspect-ratio       | Maximum ratio of the width to the height of the display area on the application page.                    |
@@ -105,13 +105,13 @@ At MediaQuery Level 4, range query is imported so that you can use the operators
 | device-width           | Width of the device.                                  |
 | min-device-width       | Minimum width of the device.                                |
 | max-device-width       | Maximum width of the device.                                |
-| round-screen           | Screen type. The value **true** indicates a circular screen, and **false** indicates a non-circular screen. |
+| round-screen           | Screen type. The value **true** means that the screen is round, and **false** means the opposite. |
 | dark-mode<sup>6+</sup> | Whether the device is in dark mode. The value **true** means that the device is in dark mode, and **false** means the opposite.                 |
 
 
-## Example
+## Sample Code for the Common Media Feature
 
-Sample code for the common media feature is as follows:
+The number and type of attributes must be the same among **.container** blocks. Otherwise, display errors will occur.
 
 ```html
 <!-- xxx.hml -->