Chinese translation of responsive-web-design (#40607)

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

@@ -8,7 +8,7 @@ forumTopicId: 1
 
 # --description--
 
-媒体查询是 CSS3 中引入的一项新技术，它可以根据不同的可视窗口大小调整内容的布局。可视窗口是用户在网页上的可见区域，根据访问网站的设备不同而不同。
+媒体查询是 CSS3 中引入的一项新技术，它可以根据不同的视口大小调整内容的布局。视口是指浏览器中，用户可见的网页内容。视口会随访问网站的设备不同而改变。
 
 媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式。你可以在媒体查询中使用各种选择器和样式。
 
@@ -20,15 +20,15 @@ forumTopicId: 1
 
 `@media (min-height: 350px) { /* CSS Rules */ }`
 
-只有当媒体类型与所使用的设备的类型匹配时，媒体查询中的 CSS 属性才生效。
+注意，只有当媒体类型与所使用的设备的类型匹配时，媒体查询中定义的 CSS 才生效。
 
 # --instructions--
 
-增加一个媒体查询，当设备的高度小于或等于 800px 时，`p` 标签的 `font-size` 为 12px。
+请添加一条媒体查询规则，当设备的高度小于等于 800px 时，`p` 标签的 `font-size` 为 `10px`。
 
 # --hints--
 
-声明一个`@media`媒体查询，`height` 小于或等于 800px。
+应使用 `@media` 声明媒体查询，其中应包含 `height` 小于等于 800px 的规则。
 
 ```js
 assert(
@@ -39,7 +39,7 @@ assert(
 );
 ```
 
-当设备 `height` 小于或等于 800px 时，`p` 元素 `font-size` 应为 10px。
+当设备 `height` 小于等于 800px 时，`p` 元素 `font-size` 应为 10px。
 
 ```js
 assert(
@@ -50,7 +50,7 @@ assert(
 );
 ```
 
-当设备的`height`大于 800px 时，`p`元素的`font-size`初始值为 20px。
+当设备的 `height` 大于 800px 时，`p` 元素的 `font-size` 应设置为其初始值 20px。
 
 ```js
 assert(

curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.md

@@ -1,6 +1,6 @@
 ---
 id: 587d78b1367417b2b2512b09
-title: 使图片根据设备尺寸自如响应
+title: 使图片自适应设备尺寸
 challengeType: 0
 videoUrl: 'https://scrimba.com/c/cPp7VfD'
 forumTopicId: 1
@@ -17,21 +17,21 @@ img {
 }
 ```
 
-设置 `max-width` 值为 `100%` 可确保图片不超出父容器的范围。设置 `height`属性为 `auto` 保持图片的原始宽高比。
+设置 `max-width` 值为 `100%` 可确保图片不超出父容器的范围；设置 `height` 属性为 `auto` 可以保持图片的原始宽高比。
 
 # --instructions--
 
-给 `responsive-img` 添加样式规则，使其成为响应式。它不应该超出父容器（在本例中，即预览窗口）的范围，并保持宽高比不变。添加代码后，拖动浏览器窗口，看看图片发生什么变化。
+给 `responsive-img` 添加样式规则，使其成为响应式的图片。它不应该超出父容器（在本例中，即预览窗口）的范围，并保持宽高比不变。添加代码后，拖动浏览器窗口，看看图片发生什么变化。
 
 # --hints--
 
-`responsive-img` 类应设置 `max-width` 为 `100%`。
+`responsive-img` 类应将 `max-width` 设置为 `100%`。
 
 ```js
 assert(getComputedStyle($('.responsive-img')[0]).maxWidth === '100%');
 ```
 
-`responsive-img` 类应设置 `height` 为 `auto`。
+`responsive-img` 类应将 `height` 设置为 `auto`。
 
 ```js
 assert(code.match(/height:\s*?auto;/g));

curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md

@@ -20,17 +20,17 @@ forumTopicId: 1
 
 # --instructions--
 
-设置 `h2` 标签的 `width` 为视窗宽度的 80%，`p` 标签的 `width` 为视窗高度和宽度中较小值的 75%。
+请将 `h2` 标签的 `width` 设置为视窗宽度的 80%，`p` 标签的 `width` 为视窗高度和宽度中较小值的 75%。
 
 # --hints--
 
-`h2` 标签 `width` 应为 80vw。
+`h2` 元素的 `width` 应为 80vw。
 
 ```js
 assert(code.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g));
 ```
 
-`p` 标签 `width` 应为 75vmin。
+`p` 元素的 `width` 应为 75vmin。
 
 ```js
 assert(code.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g));

curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.md

@@ -8,9 +8,9 @@ forumTopicId: 1
 
 # --description--
 
-随着联网设备的增加，设备的尺寸和规格有所不同，它们使用的显示器在内部和外部可能也不同。像素密度（PPI 或 DPI）就是设备之间的其中一个不同点。最著名的显示器就是最新的 Apple MacBook Pro 笔记本电脑和最近的 iMac 电脑上的“视网膜显示器”。由于“视网膜”和“非视网膜”显示器之间的像素密度不同，某些未考虑高分辨率显示器的图像在高分辨率显示器上渲染时可能看起来“像素化”。
+随着联网设备的增加，设备间的区别不仅发生在尺寸和规格上，还发生在用于显示的设备上。像素密度就是区分不同显示设备的一个指标，它一般会以 PPI（Pixel Per Inch，即每英寸像素）或 DPI（每英寸点数）为计量单位。最著名的显示器就是 Apple MacBook Pro 笔记本电脑上的“视网膜显示屏”（现亦用于 iMac）。由于“视网膜显示屏”和“非视网膜显示屏”显示器之间像素密度的不同，某些未考虑高分辨率显示器的图像在高分辨率显示器上渲染时，可能因出现“像素化”而不够清晰。
 
-使图像在高分辨率显示器（例如 MacBook Pro 的“视网膜显示器”）上正常显示的最简单方法是将其 width 和 height 值设置为原始文件的一半，如下所示：
+要让图像在高分辨率显示器（例如 MacBook Pro 的“视网膜显示屏”）上正常显示，最简单的方法是将其 width 和 height 值设置为原始文件的一半，如下所示：
 
 ```html
 <style>
@@ -21,17 +21,17 @@ forumTopicId: 1
 
 # --instructions--
 
-设置 `img` 标签的 `width` 和 `height` 为它们原始宽高的一半。在这个例子中，原始 `height` 和原始 `width` 的值都为 200px。
+请将 `img` 标签的 `width` 和 `height` 设置为它们原始宽高的一半。在这个例子中，原始 `height` 和 `width` 的值都为 200px。
 
 # --hints--
 
-`img` 标签的 `width` 值应为 100px。
+`img` 标签的 `width` 属性值应为 100px。
 
 ```js
 assert($('img').css('width') == '100px');
 ```
 
-`img` 标签的 `height` 值应为 100px。
+`img` 标签的 `height` 属性值应为 100px。
 
 ```js
 assert($('img').css('height') == '100px');