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

chore(learn): Applied MDX format to Chinese curriculum files (#40462)

Browse Source
This commit is contained in:
Randell Dawson
2020-12-16 00:37:30 -07:00
committed by GitHub
parent 873fce02a2
commit 9ce4a02a41
1665 changed files with 58741 additions and 88042 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,77 +1,66 @@
---
id: 587d78b0367417b2b2512b08
title: 创建一个媒体查询
challengeType: 0
videoUrl: 'https://scrimba.com/c/cPp7VfD'
forumTopicId: 1
title: 创建一个媒体查询
---
## Description
<section id='description'>
# --description--
媒体查询是 CSS3 中引入的一项新技术，它可以根据不同的可视窗口大小调整内容的布局。可视窗口是用户在网页上的可见区域，根据访问网站的设备不同而不同。
媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式。你可以在媒体查询中使用各种选择器和样式。
下面是一个媒体查询的例子，当设备宽度小于或等于 100px 时返回内容：
<code>@media (max-width: 100px) { /* CSS Rules */ }</code>
`@media (max-width: 100px) { /* CSS Rules */ }`
以下定义的媒体查询，是当设备高度大于或等于 350px 时返回内容：
<code>@media (min-height: 350px) { /* CSS Rules */ }</code>
`@media (min-height: 350px) { /* CSS Rules */ }`
只有当媒体类型与所使用的设备的类型匹配时，媒体查询中的 CSS 属性才生效。
</section>
# --instructions--
## Instructions
<section id='instructions'>
增加一个媒体查询，当设备的高度小于或等于 800px 时，`p` 标签的 `font-size` 为 12px。
增加一个媒体查询，当设备的高度小于或等于 800px 时，<code>p</code> 标签的 <code>font-size</code> 为 12px。
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: 声明一个<code>@media</code>媒体查询，<code>height</code> 小于或等于 800px。
testString: assert($("style").text().replace(/\s/g ,'').match(/@media\(max-height:800px\)/g));
- text: 当设备 <code>height</code> 小于或等于 800px 时，<code>p</code> 元素 <code>font-size</code> 应为 10px。
testString: assert($("style").text().replace(/\s/g ,'').match(/@media\(max-height:800px\){p{font-size:10px;?}}/g));
- 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));
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
p {
font-size: 20px;
}
/* Add media query below */
</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>
```
</div>
</section>
## Solution
<section id='solution'>
声明一个`@media`媒体查询，`height` 小于或等于 800px。
```js
// solution required
assert(
$('style')
.text()
.replace(/\s/g, '')
.match(/@media\(max-height:800px\)/g)
);
```
</section>
当设备 `height` 小于或等于 800px 时，`p` 元素 `font-size` 应为 10px。
```js
assert(
$('style')
.text()
.replace(/\s/g, '')
.match(/@media\(max-height:800px\){p{font-size:10px;?}}/g)
);
```
当设备的`height`大于 800px 时，`p`元素的`font-size`初始值为 20px。
```js
assert(
$('style')
.text()
.replace(/\s/g, '')
.replace(/@media.*}/g, '')
.match(/p{font-size:20px;?}/g)
);
```
# --solutions--

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

@ -1,13 +1,13 @@
---
id: 587d78b1367417b2b2512b09
title: 使图片根据设备尺寸自如响应
challengeType: 0
videoUrl: 'https://scrimba.com/c/cPp7VfD'
forumTopicId: 1
title: 使图片根据设备尺寸自如响应
---
## Description
<section id='description'>
# --description--
用 CSS 来让图片自适应其实很简单。你只需要给图片添加这些属性:
```css
@ -17,76 +17,25 @@ img {
}
```
设置 `max-width` 值为 `100%` 可确保图片不超出父容器的范围。设置 `height `属性为 `auto` 保持图片的原始宽高比。
</section>
设置 `max-width` 值为 `100%` 可确保图片不超出父容器的范围。设置 `height`属性为 `auto` 保持图片的原始宽高比。
## Instructions
<section id='instructions'>
# --instructions--
给 `responsive-img` 添加样式规则，使其成为响应式。它不应该超出父容器（在本例中，即预览窗口）的范围，并保持宽高比不变。添加代码后，拖动浏览器窗口，看看图片发生什么变化。
</section>
## Tests
<section id='tests'>
# --hints--
```yml
tests:
- text: <code>responsive-img</code> 类应设置 <code>max-width</code> 为 <code>100%</code>。
testString: assert(getComputedStyle($('.responsive-img')[0]).maxWidth === '100%');
- text: <code>responsive-img</code> 类应设置 <code>height</code> 为 <code>auto</code>。
testString: assert(code.match(/height:\s*?auto;/g));
`responsive-img` 类应设置 `max-width` 为 `100%`。
```js
assert(getComputedStyle($('.responsive-img')[0]).maxWidth === '100%');
```
</section>
`responsive-img` 类应设置 `height` 为 `auto`。
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
.responsive-img {
}
img {
width: 600px;
}
</style>
<img class="responsive-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">
```js
assert(code.match(/height:\s*?auto;/g));
```
# --solutions--
</div>
</section>
## Solution
<section id='solution'>
```html
<style>
.responsive-img {
max-width: 100%;
height: auto;
}
img {
width: 600px;
}
</style>
<img class="responsive-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">
```
</section>

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

@ -1,68 +1,40 @@
---
id: 587d78b1367417b2b2512b0c
title: 使排版根据设备尺寸自如响应
challengeType: 0
videoUrl: 'https://scrimba.com/c/cPp7VfD'
forumTopicId: 1
title: 使排版根据设备尺寸自如响应
---
## Description
<section id='description'>
除了使用 <code>em</code> 或 <code>px</code> 设置文本大小，你还可以用视窗单位来做响应式排版。视窗单位和百分比都是相对单位，但它们是基于不同的参照物。视窗单位是相对于设备的视窗尺寸（宽度或高度），百分比是相对于父级元素的大小。
# --description--
除了使用 `em` 或 `px` 设置文本大小，你还可以用视窗单位来做响应式排版。视窗单位和百分比都是相对单位，但它们是基于不同的参照物。视窗单位是相对于设备的视窗尺寸（宽度或高度），百分比是相对于父级元素的大小。
四个不同的视窗单位分别是：
<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
<section id='instructions'>
`body { width: 30vw; }`
设置 <code>h2</code> 标签的 <code>width</code> 为视窗宽度的 80%，<code>p</code> 标签的 <code>width</code> 为视窗高度和宽度中较小值的 75%。
</section>
# --instructions--
## Tests
<section id='tests'>
设置 `h2` 标签的 `width` 为视窗宽度的 80%，`p` 标签的 `width` 为视窗高度和宽度中较小值的 75%。
```yml
tests:
- text: '<code>h2</code> 标签 <code>width</code> 应为 80vw。'
testString: assert(code.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g));
- text: '<code>p</code> 标签 <code>width</code> 应为 75vmin。'
testString: assert(code.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g));
# --hints--
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
</style>
<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>
```
</div>
</section>
## Solution
<section id='solution'>
`h2` 标签 `width` 应为 80vw。
```js
// solution required
assert(code.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g));
```
</section>
`p` 标签 `width` 应为 75vmin。
```js
assert(code.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g));
```
# --solutions--

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

@ -1,13 +1,13 @@
---
id: 587d78b1367417b2b2512b0a
title: 针对高分辨率屏幕应使用视网膜图片
challengeType: 0
videoUrl: 'https://scrimba.com/c/cPp7VfD'
forumTopicId: 1
title: 针对高分辨率屏幕应使用视网膜图片
---
## Description
<section id='description'>
# --description--
随着联网设备的增加，设备的尺寸和规格有所不同，它们使用的显示器在内部和外部可能也不同。像素密度（PPI 或 DPI）就是设备之间的其中一个不同点。最著名的显示器就是最新的 Apple MacBook Pro 笔记本电脑和最近的 iMac 电脑上的“视网膜显示器”。由于“视网膜”和“非视网膜”显示器之间的像素密度不同，某些未考虑高分辨率显示器的图像在高分辨率显示器上渲染时可能看起来“像素化”。
使图像在高分辨率显示器（例如 MacBook Pro 的“视网膜显示器”）上正常显示的最简单方法是将其 width 和 height 值设置为原始文件的一半，如下所示：
@ -19,55 +19,23 @@ title: 针对高分辨率屏幕应使用视网膜图片
<img src="coolPic500x500" alt="A most excellent picture">
```
</section>
# --instructions--
## Instructions
<section id='instructions'>
设置 `img` 标签的 `width` 和 `height` 为它们原始宽高的一半。在这个例子中，原始 `height` 和原始 `width` 的值都为 200px。
设置 <code>img</code> 标签的 <code>width</code> 和 <code>height</code> 为它们原始宽高的一半。在这个例子中，原始 <code>height</code> 和原始 <code>width</code> 的值都为 200px。
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: '<code>img</code> 标签的 <code>width</code> 值应为 100px。'
testString: assert($('img').css('width') == '100px');
- text: '<code>img</code> 标签的 <code>height</code> 值应为 100px。'
testString: assert($('img').css('height') == '100px');
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
</style>
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
```
</div>
</section>
## Solution
<section id='solution'>
`img` 标签的 `width` 值应为 100px。
```js
// solution required
assert($('img').css('width') == '100px');
```
</section>
`img` 标签的 `height` 值应为 100px。
```js
assert($('img').css('height') == '100px');
```
# --solutions--