zh-cn: update the translation of media query (#15979)

Co-authored-by: Jason Ren <[email protected]>

files/zh-cn/web/css/css_media_queries/index.md

@@ -1,44 +1,50 @@
 ---
 title: 媒体查询
 slug: Web/CSS/CSS_media_queries
+l10n:
+  sourceCommit: 72304bf90ccd530ff9dc9e5ff12397b2600248ed
 ---
 
 {{CSSRef}}
 
-通过**媒体查询**（**Media queries**），你可以根据各种设备特征和参数的值或者是否存在来调整你的网站或应用。
+**CSS 媒体查询**（media query）是[响应式设计](/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design)的关键组成部分，你可以根据各种设备特征和参数是否存在以及对应的值来应用 CSS 样式。
 
-它们是[响应式设计](/zh-CN/docs/Web/Apps/Progressive/Responsive)的关键组成部分。例如，媒体查询可以缩小小型设备上的字体大小，在纵向模式下查看页面时增加段落之间的填充，或者增加触摸屏上按钮的大小。
+通常根据{{Glossary("viewport", "视口")}}大小来应用媒体查询，以便可以为不同屏幕大小的设备做出布局调整。例如，你可以为小屏设备设置较小的字体，在纵向模式下查看页面时增加段落间的边距，或者增加触摸屏上按钮的大小。
 
-在 CSS 中，使用 {{cssxref("@media")}} [at-rule](/zh-CN/docs/Web/CSS/At-rule) 根据媒体查询的结果有条件地应用样式表的一部分。使用 {{cssxref("@import")}} 有条件地应用整个样式表。
+![笔记本电脑和移动设备具有不同的视口大小，可以使用媒体查询进行查询，我们可以看到内容布局的不同。](media-queries.svg)
+
+在 CSS 中，可以使用 {{cssxref("@media")}} [at 规则](/zh-CN/docs/Web/CSS/At-rule)根据媒体查询的结果有条件地应用样式表的一部分。要有条件地应用整个样式表，请使用 {{cssxref("@import")}}。
+
+在设置可重用的 HTML 组件时，你还可以使用容器查询，它允许你根据容器元素的大小而非视口或者其他设备特征来应用样式。
 
 ### 在 HTML 中使用媒体查询
 
 在 [HTML](/zh-CN/docs/Web/HTML) 中，媒体查询可以应用于各种元素：
 
-- 在{{HTMLElement("link")}}元素的[`media`](/zh-CN/docs/Web/HTML/Element/link#media)属性中，它们定义了待应用链接资源（通常是 CSS）的媒体。
-- 在{{HTMLElement("source")}}元素的[`media`](/zh-CN/docs/Web/HTML/Element/source#media)属性中，它们定义待应用源的媒体。 （这仅在{{HTMLElement("picture")}}元素内有效。）
-- 在{{HTMLElement("style")}}元素的[`media`](/zh-CN/docs/Web/HTML/Element/style#media)属性中，它们定义待应用样式的媒体。
+- 在 {{HTMLElement("link")}} 元素的 [`media`](/zh-CN/docs/Web/HTML/Element/link#media) 属性中，其定义待应用链接资源（通常是 CSS）的媒体。
+- 在 {{HTMLElement("source")}} 元素的 [`media`](/zh-CN/docs/Web/HTML/Element/source#media) 属性中，其定义待应用源的媒体。（这仅在 {{HTMLElement("picture")}} 元素内有效。）
+- 在 {{HTMLElement("style")}} 元素的 [`media`](/zh-CN/docs/Web/HTML/Element/style#media) 属性中，其定义待应用样式的媒体。
 
 ### 在 JavaScript 中使用媒体查询
 
-在[JavaScript](/zh-CN/docs/Web/JavaScript)中，你可以使用 {{domxref("Window.matchMedia()")}} 方法根据媒体查询测试窗口。你还可以使用{{domxref("MediaQueryList.addListener()")}}在查询状态发生变化时收到通知。借助此功能，你的站点或应用可以响应设备配置，方向或状态的更改。
+在 [JavaScript](/zh-CN/docs/Web/JavaScript) 中，你可以使用 {{domxref("Window.matchMedia()")}} 方法根据媒体查询测试窗口。你还可以使用 {{domxref("MediaQueryList.addListener()")}} 在查询状态发生变化时收到通知。借助此功能，你的站点或应用可以响应设备配置、方向或状态的更改。
 
-你可以学习更多以编程方式使用媒体查询在[测试媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Testing_media_queries)中。
+你可以在[测试媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Testing_media_queries)中学到更多通过编程方式使用媒体查询的知识。
 
 ## 参考
 
-### At-rules
+### At 规则
 
 - {{cssxref("@import")}}
 - {{cssxref("@media")}}
 
 ## 指南
 
 - [使用媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)
-  - : 介绍媒体查询和媒体查询的的语法以及用于构造媒体查询表达式的运算符和媒体功能。
-- [编程方式使用媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Testing_media_queries)
+  - : 介绍媒体查询及其语法，以及用于构造媒体查询表达式的运算符和媒体特性。
+- [通过编程方式使用媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Testing_media_queries)
   - : 描述如何在 JavaScript 代码中使用媒体查询来确定设备的状态，以及设置在媒体查询结果发生更改时（例如，当用户旋转屏幕或调整浏览器大小时）通知代码的监听器。
-- [使用媒体查询增强网站的无障碍](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_CSS_media_queries_for_Accessibility)
+- [使用媒体查询增强无障碍](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility))
   - : 了解媒体查询如何帮助用户更好地了解你的网站。
 
 ## 规范
@@ -47,4 +53,5 @@ slug: Web/CSS/CSS_media_queries
 
 ## 参见
 
-- Use {{cssxref("@supports")}} to apply styles that depend on browser support for various CSS technologies.
+- [容器查询](/zh-CN/docs/Web/CSS/CSS_container_queries)
+- 使用 {{cssxref("@supports")}} 来根据浏览器支持的 CSS 技术应用样式。