From c0d5d6ad4faeee9fbde9f5633404b1f25342fa91 Mon Sep 17 00:00:00 2001 From: ZhichengChen Date: Tue, 11 Feb 2020 21:30:05 +0800 Subject: [PATCH] =?UTF-8?q?fix(i18n):=20update=20Chinese=20translation=20o?= =?UTF-8?q?f=20responsive=20web=20design=20princi=E2=80=A6=20(#37922)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../create-a-media-query.chinese.md | 43 +++++++++++++------ .../make-an-image-responsive.chinese.md | 38 ++++++++++------ .../make-typography-responsive.chinese.md | 33 +++++++++----- ...-for-higher-resolution-displays.chinese.md | 39 ++++++++++++----- 4 files changed, 107 insertions(+), 46 deletions(-) diff --git a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.chinese.md index 60108e7393..9d2bcd4fe0 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.chinese.md @@ -2,27 +2,39 @@ id: 587d78b0367417b2b2512b08 title: Create a Media Query challengeType: 0 -videoUrl: '' -localeTitle: 创建媒体查询 +videoUrl: 'https://scrimba.com/c/cPp7VfD' +forumTopicId: 1 +localeTitle: 创建一个媒体查询 --- ## Description -
媒体查询是CSS3中引入的一种新技术，它根据不同的视口大小更改内容的显示。视口是用户在网页上的可见区域，根据用于访问网站的设备而不同。媒体查询由媒体类型组成，如果该媒体类型与显示文档的设备类型匹配，则应用样式。您可以根据需要在媒体查询中包含尽可能多的选择器和样式。以下是媒体查询的示例，当设备的宽度小于或等于100px时返回内容： @media (max-width: 100px) { /* CSS Rules */ }并且以下媒体查询返回内容时设备的高度大于或等于350px： @media (min-height: 350px) { /* CSS Rules */ }请记住，仅当媒体类型与正在使用的设备的媒体类型匹配时，才应用媒体查询中的CSS。
+
+媒体查询是 CSS3 中引入的一项新技术，它可以根据不同的可视窗口大小调整内容的布局。可视窗口是用户在网页上的可见区域，根据访问网站的设备不同而不同。 +媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式。你可以在媒体查询中使用各种选择器和样式。 +下面是一个媒体查询的例子，当设备宽度小于或等于 100px 时返回内容： +@media (max-width: 100px) { /* CSS Rules */ } +以下定义的媒体查询，是当设备高度大于或等于 350px 时返回内容： +@media (min-height: 350px) { /* CSS Rules */ } +只有当媒体类型与所使用的设备的类型匹配时，媒体查询中的 CSS 属性才生效。 + +
## Instructions -
添加媒体查询，以便当设备的高度小于或等于800px时， p标签的font-size为10px。
+
+ +增加一个媒体查询，当设备的高度小于或等于 800px 时，p 标签的 font-size 为 12px。 +
## Tests
```yml tests: - - text: 为height小于或等于800px的设备声明@media查询。 - testString: assert($(“style”).text().replace(/\s/g ,‘’).match(/@media\(max-height:800px\)/g), “Declare a @media query for devices with a height less than or equal to 800px.“); - - 当设备 height 小于或等于800px时， p 元素的 font-size 应为10px. - testString: assert($(“style”).text().replace(/\s/g ,‘’).match(/@media\(max-height:800px\){p{font-size:10px;?}}/g), “Your p element should have the font-size of 10px when the device height is less than or equal to 800px.“);’ - - text: 当设备height大于800px时，您的p元素的font-size初始值应为20px。 - testString: assert($(“style”).text().replace(/\s/g ,‘’).replace(/@media.*}/g, ‘’).match(/p{font-size:20px;?}/g), Your p element should have an initial font-size of 20px when the device height is more than 800px); + - text: '当设备 height 小于或等于 800px 时，p 元素 font-size 应为 12px。' + testString: assert($('p').css('font-size') == '12px', '当设备 height 小于或等于 800px 时，p 元素 font-size 应为 12px。'); + - text: '使用 @media 为 height 小于或等于 800px 的设备添加一个媒体查询。' + testString: 'assert(code.match(/@media\s?\(max-height:\s*?800px\)/g), ''使用 @media 为 height 小于或等于 800px 的设备添加一个媒体查询。'');' + ```
@@ -37,15 +49,16 @@ tests: p { font-size: 20px; } - + /* Add media query below */ - + - +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.

- ``` + + @@ -58,4 +71,6 @@ tests: ```js // solution required ``` + + \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.chinese.md index 4a912dbcd3..467dbe6363 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.chinese.md @@ -2,27 +2,38 @@ id: 587d78b1367417b2b2512b09 title: Make an Image Responsive challengeType: 0 -videoUrl: '' -localeTitle: 使图像响应 +videoUrl: 'https://scrimba.com/c/cPp7VfD' +forumTopicId: 1 +localeTitle: 使图片根据设备尺寸自如响应 --- ## Description -
使用CSS响应图像实际上非常简单。而不是对元素应用绝对宽度： img { width: 720px; }您可以使用：
img {
最大宽度：100％;
显示：块;
身高：自动;
}
100％的max-width属性会缩放图像以适合其容器的宽度，但图像的拉伸宽度不会超过其原始宽度。将display属性设置为block会将图像从内联元素（默认值）更改为其自身行上的块元素。 auto的height属性保持图像的原始宽高比。
+
+用 CSS 来让图片自适应其实很简单。不要使用绝对单位： +img { width: 720px; } +你应该使用： +
img {
  max-width: 100%;
  display: block;
  height: auto;
}
+max-width 属性能让图片以 100% 的最大宽度适应其父容器的宽度，但图片不会拉伸得比原始宽度还宽。把 display 属性值设置为 block，将 image 标签从内联元素（默认值）更改为块级元素。设置 height 属性为 auto 保持图片的原始宽高比。 + +
## Instructions -
添加img标记的样式规则，使其响应其容器的大小。它应该显示为块级元素，它应该适合其容器的整个宽度而不拉伸，并且它应该保持其原始的宽高比。
+
+ +给 img 标签增加样式规则使它自适应容器尺寸。应声明为块级元素，应适应它容器的宽度，应保持原本的宽高比。 +
## Tests
```yml tests: - - text: 您的img标记的max-width设置为100％。 - testString: 'assert(code.match(/max-width:\s*?100%;/g), "Your img tag should have a max-width set to 100%.");' - - text: 你的img标签应该有一个display设置阻止。 - testString: 'assert($("img").css("display") == "block", "Your img tag should have a display set to block.");' - - text: 你的img标签的height应该设置为auto。 - testString: 'assert(code.match(/height:\s*?auto;/g), "Your img tag should have a height set to auto.");' + - text: 'img 标签应设置 max-width 为 100%。' + testString: 'assert(code.match(/max-width:\s*?100%;/g), ''img 标签应设置 max-width 为 100%。'');' + - text: 'img 标签应设置 display 为 block。' + testString: assert($('img').css('display') == 'block', 'img 标签应设置 display 为 block。'); + - text: 'img 标签应设置 height 为 auto。' + testString: 'assert(code.match(/height:\s*?auto;/g), ''img 标签应设置 height 为 auto。'');' ``` @@ -35,13 +46,14 @@ tests: ```html freeCodeCamp stickers set - ``` + + @@ -54,4 +66,6 @@ tests: ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.chinese.md index aba9c7ef62..41669dac59 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.chinese.md @@ -2,25 +2,35 @@ id: 587d78b1367417b2b2512b0c title: Make Typography Responsive challengeType: 0 -videoUrl: '' -localeTitle: 使排版响应 +videoUrl: 'https://scrimba.com/c/cPp7VfD' +forumTopicId: 1 +localeTitle: 使排版根据设备尺寸自如响应 --- ## Description -
您可以使用视口单元进行响应式排版，而不是使用em或px来调整文本大小。视口单位（如百分比）是相对单位，但它们基于不同的项目。视口单元相对于设备的视口尺寸（宽度或高度），百分比相对于父容器元素的大小。四个不同的视口单元是：
  • vw: 10vw将是视口宽度的10％。
  • vh: 3vh将是视口高度的3％。
  • vmin: 70vmin将是视口较小尺寸（高度与宽度）的70％。
  • vmax: 100vmax将是视口较大尺寸（高度与宽度）的100％。
+
+除了使用 em 或 px 设置文本大小，你还可以用视窗单位来做响应式排版。视窗单位和百分比都是相对单位，但它们是基于不同的参照物。视窗单位是相对于设备的视窗尺寸（宽度或高度），百分比是相对于父级元素的大小。 +四个不同的视窗单位分别是： +
  • vw：如 10vw 的意思是视窗宽度的 10%。
  • vh： 如 3vh 的意思是视窗高度的 3%。
  • vmin： 如 70vmin 的意思是视窗的高度和宽度中较小一个的 70%。
  • vmax： 如 100vmax 的意思是视窗的高度和宽度中较大一个的 100%。
+下面这个例子是设置 body 标签的宽度为视窗宽度的 30%。 +body { width: 30vw; } +
## Instructions -
将h2标记的width设置为视口宽度的80％，将段落的width设置为视口较小尺寸的75％。
+
+ +设置 h2 标签的 width 为视窗宽度的 80%，p 标签的 width 为视窗高度和宽度中较小值的 75%。 +
## Tests
```yml tests: - - text: 你的h2标签应该有80vw的width 。 - testString: 'assert(code.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g), "Your h2 tag should have a width of 80vw.");' - - text: 你的p标签应该有75vmin的width 。 - testString: 'assert(code.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g), "Your p tag should have a width of 75vmin.");' + - text: 'h2 标签 width 应为 80vw。' + testString: 'assert(code.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g), ''h2 标签的 width 应为 80vw。'');' + - text: 'p 标签 width 应为 75vmin。' + testString: 'assert(code.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g), ''p 标签的 width 应为 75vmin。'');' ``` @@ -33,14 +43,15 @@ tests: ```html

Importantus Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.

- ``` + + @@ -53,4 +64,6 @@ tests: ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.chinese.md index de496d58a7..8434b1c645 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.chinese.md @@ -2,25 +2,41 @@ id: 587d78b1367417b2b2512b0a title: Use a Retina Image for Higher Resolution Displays challengeType: 0 -videoUrl: '' -localeTitle: 使用Retina图像获得更高分辨率的显示 +videoUrl: 'https://scrimba.com/c/cPp7VfD' +forumTopicId: 1 +localeTitle: 针对高分辨率屏幕应使用视网膜图片 --- ## Description -
使图像显示为“视网膜”（并为视网膜显示进行优化）的最简单方法是将其width和height值定义为原始文件的一半。以下是仅使用原始高度和宽度的一半的图像示例：
<风格>
img {身高：250px;宽度：250px; }
</样式>
<img src =“coolPic500x500”alt =“最精彩的图片”>
+
+随着联网设备的增加，设备的尺寸和规格有所不同，它们使用的显示器在内部和外部可能也不同。像素密度（PPI 或 DPI）就是设备之间的其中一个不同点。最著名的显示器就是最新的 Apple MacBook Pro 笔记本电脑和最近的 iMac 电脑上的“视网膜显示器”。由于“视网膜”和“非视网膜”显示器之间的像素密度不同，某些未考虑高分辨率显示器的图像在高分辨率显示器上渲染时可能看起来“像素化”。 + +使图像在高分辨率显示器（例如 MacBook Pro 的“视网膜显示器”）上正常显示的最简单方法是将其 width 和 height 值设置为原始文件的一半，如下所示： + +```html + +A most excellent picture +``` + +
## Instructions -
将img标记的width和height设置为原始值的一半。在这种情况下，原始height和原始width都是200px。
+
+ +设置 img 标签的 width 和 height 为它们原始宽高的一半。在这个例子中，原始 height 和原始 width 的值都为 200px。 +
## Tests
```yml tests: - - text: 你的img标签应该有100像素的width 。 - testString: 'assert($("img").css("width") == "100px", "Your img tag should have a width of 100 pixels.");' - - text: 你的img标签应该有100像素的height 。 - testString: 'assert($("img").css("height") == "100px", "Your img tag should have a height of 100 pixels.");' + - text: 'img 标签的 width 值应为 100px。' + testString: assert($('img').css('width') == '100px', 'img 标签的 width 值应为 100px。'); + - text: 'img 标签的 height 值应为 100px。' + testString: assert($('img').css('height') == '100px', 'img 标签的 height 值应为 100px。'); ``` @@ -33,13 +49,14 @@ tests: ```html freeCodeCamp sticker that says 'Because CamperBot Cares' - ``` + + @@ -52,4 +69,6 @@ tests: ```js // solution required ``` +
+ \ No newline at end of file