gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(i18n): update Chinese translation of responsive web design princi… (#37922)

Browse Source
This commit is contained in:
ZhichengChen
2020-02-11 21:30:05 +08:00
committed by GitHub
parent 3c743574f6
commit c0d5d6ad4f
4 changed files with 107 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,27 +2,39 @@
id: 587d78b0367417b2b2512b08 id: 587d78b0367417b2b2512b08
title: Create a Media Query title: Create a Media Query
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/c/cPp7VfD'
localeTitle: 创建媒体查询 forumTopicId: 1
localeTitle: 创建一个媒体查询
--- ---
## Description ## Description
<section id="description">媒体查询是CSS3中引入的一种新技术，它根据不同的视口大小更改内容的显示。视口是用户在网页上的可见区域，根据用于访问网站的设备而不同。媒体查询由媒体类型组成，如果该媒体类型与显示文档的设备类型匹配，则应用样式。您可以根据需要在媒体查询中包含尽可能多的选择器和样式。以下是媒体查询的示例，当设备的宽度小于或等于100px时返回内容： <code>@media (max-width: 100px) { /* CSS Rules */ }</code>并且以下媒体查询返回内容时设备的高度大于或等于350px： <code>@media (min-height: 350px) { /* CSS Rules */ }</code>请记住，仅当媒体类型与正在使用的设备的媒体类型匹配时，才应用媒体查询中的CSS。 </section> <section id='description'>
媒体查询是 CSS3 中引入的一项新技术，它可以根据不同的可视窗口大小调整内容的布局。可视窗口是用户在网页上的可见区域，根据访问网站的设备不同而不同。
媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式。你可以在媒体查询中使用各种选择器和样式。
下面是一个媒体查询的例子，当设备宽度小于或等于 100px 时返回内容：
<code>@media (max-width: 100px) { /* CSS Rules */ }</code>
以下定义的媒体查询，是当设备高度大于或等于 350px 时返回内容：
<code>@media (min-height: 350px) { /* CSS Rules */ }</code>
只有当媒体类型与所使用的设备的类型匹配时，媒体查询中的 CSS 属性才生效。
</section>
## Instructions ## Instructions
<section id="instructions">添加媒体查询，以便当设备的高度小于或等于800px时， <code>p</code>标签的<code>font-size</code>为10px。 </section> <section id='instructions'>
增加一个媒体查询，当设备的高度小于或等于 800px 时，<code>p</code> 标签的 <code>font-size</code> 为 12px。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 为<code>height</code>小于或等于800px的设备声明<code>@media</code>查询。 - text: '当设备 <code>height</code> 小于或等于 800px 时，<code>p</code> 元素 <code>font-size</code> 应为 12px。'
testString: assert($(“style”).text().replace(/\s/g ,‘’).match(/@media\(max-height:800px\)/g), “Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.“); testString: assert($('p').css('font-size') == '12px', '当设备 <code>height</code> 小于或等于 800px 时，<code>p</code> 元素 <code>font-size</code> 应为 12px。');
- 当设备<code> height </ code>小于或等于800px时，<code> p </ code>元素的<code> font-size </ code>应为10px. - text: '使用 <code>@media</code> 为 <code>height</code> 小于或等于 800px 的设备添加一个媒体查询。'
testString: assert($(“style”).text().replace(/\s/g ,‘’).match(/@media\(max-height:800px\){p{font-size:10px;?}}/g), “Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.“);’ testString: 'assert(code.match(/@media\s?\(max-height:\s*?800px\)/g), ''使用 <code>@media</code> 为 <code>height</code> 小于或等于 800px 的设备添加一个媒体查询。'');'
- text: 当设备<code>height</code>大于800px时，您的<code>p</code>元素的<code>font-size</code>初始值应为20px。
testString: assert($(“style”).text().replace(/\s/g ,‘’).replace(/@media.*}/g, ‘’).match(/p{font-size:20px;?}/g), Your <code>p</code> element should have an initial <code>font-size</code> of 20px when the device <code>height</code> is more than 800px);
``` ```
</section> </section>
@ -37,15 +49,16 @@ tests:
p { p {
font-size: 20px; font-size: 20px;
} }
/* Add media query below */ /* Add media query below */
</style> </style>
<p>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.</p> <p>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.</p>
``` ```
</div> </div>
@ -58,4 +71,6 @@ tests:
```js ```js
// solution required // solution required
``` ```
</section> </section>

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

@ -2,27 +2,38 @@
id: 587d78b1367417b2b2512b09 id: 587d78b1367417b2b2512b09
title: Make an Image Responsive title: Make an Image Responsive
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/c/cPp7VfD'
localeTitle: 使图像响应 forumTopicId: 1
localeTitle: 使图片根据设备尺寸自如响应
--- ---
## Description ## Description
<section id="description">使用CSS响应图像实际上非常简单。而不是对元素应用绝对宽度： <code>img { width: 720px; }</code>您可以使用： <blockquote> img { <br>最大宽度：100％; <br>显示：块; <br>身高：自动; <br> } </blockquote> 100％的<code>max-width</code>属性会缩放图像以适合其容器的宽度，但图像的拉伸宽度不会超过其原始宽度。将<code>display</code>属性设置为block会将图像从内联元素（默认值）更改为其自身行上的块元素。 auto的<code>height</code>属性保持图像的原始宽高比。 </section> <section id='description'>
用 CSS 来让图片自适应其实很简单。不要使用绝对单位：
<code>img { width: 720px; }</code>
你应该使用：
<blockquote>img {<br>&nbsp;&nbsp;max-width: 100%;<br>&nbsp;&nbsp;display: block;<br>&nbsp;&nbsp;height: auto;<br>}</blockquote>
<code>max-width</code> 属性能让图片以 100% 的最大宽度适应其父容器的宽度，但图片不会拉伸得比原始宽度还宽。把 <code>display</code> 属性值设置为 block，将 image 标签从内联元素（默认值）更改为块级元素。设置 <code>height</code> 属性为 auto 保持图片的原始宽高比。
</section>
## Instructions ## Instructions
<section id="instructions">添加<code>img</code>标记的样式规则，使其响应其容器的大小。它应该显示为块级元素，它应该适合其容器的整个宽度而不拉伸，并且它应该保持其原始的宽高比。 </section> <section id='instructions'>
给 <code>img</code> 标签增加样式规则使它自适应容器尺寸。应声明为块级元素，应适应它容器的宽度，应保持原本的宽高比。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 您的<code>img</code>标记的<code>max-width</code>设置为100％。 - text: '<code>img</code> 标签应设置 <code>max-width</code> 为 100%。'
testString: 'assert(code.match(/max-width:\s*?100%;/g), "Your <code>img</code> tag should have a <code>max-width</code> set to 100%.");' testString: 'assert(code.match(/max-width:\s*?100%;/g), ''<code>img</code> 标签应设置 <code>max-width</code> 为 100%。'');'
- text: 你的<code>img</code>标签应该有一个<code>display</code>设置阻止。 - text: '<code>img</code> 标签应设置 <code>display</code> 为 block。'
testString: 'assert($("img").css("display") == "block", "Your <code>img</code> tag should have a <code>display</code> set to block.");' testString: assert($('img').css('display') == 'block', '<code>img</code> 标签应设置 <code>display</code> 为 block。');
- text: 你的<code>img</code>标签的<code>height</code>应该设置为auto。 - text: '<code>img</code> 标签应设置 <code>height</code> 为 auto。'
testString: 'assert(code.match(/height:\s*?auto;/g), "Your <code>img</code> tag should have a <code>height</code> set to auto.");' testString: 'assert(code.match(/height:\s*?auto;/g), ''<code>img</code> 标签应设置 <code>height</code> 为 auto。'');'
``` ```
@ -35,13 +46,14 @@ tests:
```html ```html
<style> <style>
</style> </style>
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set"> <img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
``` ```
</div> </div>
@ -54,4 +66,6 @@ tests:
```js ```js
// solution required // solution required
``` ```
</section> </section>

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

@ -2,25 +2,35 @@
id: 587d78b1367417b2b2512b0c id: 587d78b1367417b2b2512b0c
title: Make Typography Responsive title: Make Typography Responsive
challengeType: 0 challengeType: 0
videoUrl: '' videoUrl: 'https://scrimba.com/c/cPp7VfD'
localeTitle: 使排版响应 forumTopicId: 1
localeTitle: 使排版根据设备尺寸自如响应
--- ---
## Description ## Description
<section id="description">您可以使用视口单元进行响应式排版，而不是使用<code>em</code>或<code>px</code>来调整文本大小。视口单位（如百分比）是相对单位，但它们基于不同的项目。视口单元相对于设备的视口尺寸（宽度或高度），百分比相对于父容器元素的大小。四个不同的视口单元是： <ul><li> <code>vw: 10vw</code>将是视口宽度的10％。 </li><li> <code>vh: 3vh</code>将是视口高度的3％。 </li><li> <code>vmin: 70vmin</code>将是视口较小尺寸（高度与宽度）的70％。 </li><li> <code>vmax: 100vmax</code>将是视口较大尺寸（高度与宽度）的100％。 </li></ul></section> <section id='description'>
除了使用 <code>em</code> 或 <code>px</code> 设置文本大小，你还可以用视窗单位来做响应式排版。视窗单位和百分比都是相对单位，但它们是基于不同的参照物。视窗单位是相对于设备的视窗尺寸（宽度或高度），百分比是相对于父级元素的大小。
四个不同的视窗单位分别是：
<ul><li><code>vw</code>：如 <code>10vw</code> 的意思是视窗宽度的 10%。</li><li><code>vh：</code> 如 <code>3vh</code> 的意思是视窗高度的 3%。</li><li><code>vmin：</code> 如 <code>70vmin</code> 的意思是视窗的高度和宽度中较小一个的 70%。</li><li><code>vmax：</code> 如 <code>100vmax</code> 的意思是视窗的高度和宽度中较大一个的 100%。</li></ul>
下面这个例子是设置 body 标签的宽度为视窗宽度的 30%。
<code>body { width: 30vw; }</code>
</section>
## Instructions ## Instructions
<section id="instructions">将<code>h2</code>标记的<code>width</code>设置为视口宽度的80％，将段落的<code>width</code>设置为视口较小尺寸的75％。 </section> <section id='instructions'>
设置 <code>h2</code> 标签的 <code>width</code> 为视窗宽度的 80%，<code>p</code> 标签的 <code>width</code> 为视窗高度和宽度中较小值的 75%。
</section>
## Tests ## Tests
<section id='tests'> <section id='tests'>
```yml ```yml
tests: tests:
- text: 你的<code>h2</code>标签应该有80vw的<code>width</code> 。 - text: '<code>h2</code> 标签 <code>width</code> 应为 80vw。'
testString: 'assert(code.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g), "Your <code>h2</code> tag should have a <code>width</code> of 80vw.");' testString: 'assert(code.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g), ''<code>h2</code> 标签的 <code>width</code> 应为 80vw。'');'
- text: 你的<code>p</code>标签应该有75vmin的<code>width</code> 。 - text: '<code>p</code> 标签 <code>width</code> 应为 75vmin。'
testString: 'assert(code.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g), "Your <code>p</code> tag should have a <code>width</code> of 75vmin.");' testString: 'assert(code.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g), ''<code>p</code> 标签的 <code>width</code> 应为 75vmin。'');'
``` ```
@ -33,14 +43,15 @@ tests:
```html ```html
<style> <style>
</style> </style>
<h2>Importantus Ipsum</h2> <h2>Importantus Ipsum</h2>
<p>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.</p> <p>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.</p>
``` ```
</div> </div>
@ -53,4 +64,6 @@ tests:
```js ```js
// solution required // solution required
``` ```
</section> </section>

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

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