chore(i18n,curriculum): update translations (#42298)

curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md

@@ -13,13 +13,13 @@ dashedName: create-a-media-query
 
 媒體查詢由媒體類型組成，如果媒體類型與展示網頁的設備類型匹配，則應用對應的樣式。 你可以在媒體查詢中使用各種選擇器和樣式。
 
-下面是一個媒體查詢的例子，當設備寬度小於或等於 100px 時返回內容：
+下面是一個媒體查詢的例子，當設備寬度小於或等於 `100px` 時返回內容：
 
 ```css
 @media (max-width: 100px) { /* CSS Rules */ }
 ```
 
-以下定義的媒體查詢，是當設備高度大於或等於 350px 時返回內容：
+以下定義的媒體查詢，是當設備高度大於或等於 `350px` 時返回內容：
 
 ```css
 @media (min-height: 350px) { /* CSS Rules */ }
@@ -33,38 +33,25 @@ dashedName: create-a-media-query
 
 # --hints--
 
-應使用 `@media` 聲明媒體查詢，其中應包含 `height` 小於等於 800px 的規則。
+你應使用 `@media` 聲明媒體查詢，其中應包含 `height` 小於等於 `800px` 的規則。
 
 ```js
-assert(
-  $('style')
-    .text()
-    .replace(/\s/g, '')
-    .match(/@media\(max-height:800px\)/g)
-);
+const media = new __helpers.CSSHelp(document).getCSSRules('media');
+assert(media.some(x => x.conditionText?.includes('(max-height: 800px)')));
 ```
 
-當設備 `height` 小於等於 800px 時，`p` 元素 `font-size` 應爲 10px。
+當設備 `height` 小於等於 `800px` 時，`p` 元素的 `font-size` 應爲 `10px`。
 
 ```js
-assert(
-  $('style')
-    .text()
-    .replace(/\s/g, '')
-    .match(/@media\(max-height:800px\){p{font-size:10px;?}}/g)
-);
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-height: 800px)');
+assert(rules?.find(x => x.selectorText === 'p')?.style.fontSize === "10px");
 ```
 
-當設備的 `height` 大於 800px 時，`p` 元素的 `font-size` 應設置爲其初始值 20px。
+當設備 `height` 大於 `800px` 時，`p` 元素的 `font-size` 應爲 `20px`。
 
 ```js
-assert(
-  $('style')
-    .text()
-    .replace(/\s/g, '')
-    .replace(/@media.*}/g, '')
-    .match(/p{font-size:20px;?}/g)
-);
+const ifPFirst = new __helpers.CSSHelp(document).getCSSRules()?.find(x => x?.selectorText === 'p' || x?.media);
+assert(ifPFirst?.style?.fontSize === '20px');
 ```
 
 # --seed--

curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md

@@ -13,13 +13,13 @@ dashedName: create-a-media-query
 
 媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式。 你可以在媒体查询中使用各种选择器和样式。
 
-下面是一个媒体查询的例子，当设备宽度小于或等于 100px 时返回内容：
+下面是一个媒体查询的例子，当设备宽度小于或等于 `100px` 时返回内容：
 
 ```css
 @media (max-width: 100px) { /* CSS Rules */ }
 ```
 
-以下定义的媒体查询，是当设备高度大于或等于 350px 时返回内容：
+以下定义的媒体查询，是当设备高度大于或等于 `350px` 时返回内容：
 
 ```css
 @media (min-height: 350px) { /* CSS Rules */ }
@@ -33,38 +33,25 @@ dashedName: create-a-media-query
 
 # --hints--
 
-应使用 `@media` 声明媒体查询，其中应包含 `height` 小于等于 800px 的规则。
+你应使用 `@media` 声明媒体查询，其中应包含 `height` 小于等于 `800px` 的规则。
 
 ```js
-assert(
-  $('style')
-    .text()
-    .replace(/\s/g, '')
-    .match(/@media\(max-height:800px\)/g)
-);
+const media = new __helpers.CSSHelp(document).getCSSRules('media');
+assert(media.some(x => x.conditionText?.includes('(max-height: 800px)')));
 ```
 
-当设备 `height` 小于等于 800px 时，`p` 元素 `font-size` 应为 10px。
+当设备 `height` 小于等于 `800px` 时，`p` 元素的 `font-size` 应为 `10px`。
 
 ```js
-assert(
-  $('style')
-    .text()
-    .replace(/\s/g, '')
-    .match(/@media\(max-height:800px\){p{font-size:10px;?}}/g)
-);
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-height: 800px)');
+assert(rules?.find(x => x.selectorText === 'p')?.style.fontSize === "10px");
 ```
 
-当设备的 `height` 大于 800px 时，`p` 元素的 `font-size` 应设置为其初始值 20px。
+当设备 `height` 大于 `800px` 时，`p` 元素的 `font-size` 应为 `20px`。
 
 ```js
-assert(
-  $('style')
-    .text()
-    .replace(/\s/g, '')
-    .replace(/@media.*}/g, '')
-    .match(/p{font-size:20px;?}/g)
-);
+const ifPFirst = new __helpers.CSSHelp(document).getCSSRules()?.find(x => x?.selectorText === 'p' || x?.media);
+assert(ifPFirst?.style?.fontSize === '20px');
 ```
 
 # --seed--