Add languages Russian, Arabic, Chinese, Portuguese (#18305)
This commit is contained in:
Beau Carnes
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
09d3eca712
commit
2ca3a2093f
@ -0,0 +1,60 @@
|
||||
---
|
||||
id: 587d78b0367417b2b2512b08
|
||||
title: Create a Media Query
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 创建媒体查询
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">添加媒体查询，以便当设备的高度小于或等于800px时， <code>p</code>标签的<code>font-size</code>为10px。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 当设备<code>height</code>小于或等于800px时，您的<code>p</code>元素的<code>font-size</code>为10px。
|
||||
testString: 'assert($("p").css("font-size") == "10px", "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.");'
|
||||
- text: 为<code>height</code>小于或等于800px的设备声明<code>@media</code>查询。
|
||||
testString: 'assert(code.match(/@media\s*?\(\s*?max-height\s*?:\s*?800px\s*?\)/g), "Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.");'
|
||||
|
||||
```
|
||||
|
||||
</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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b09
|
||||
title: Make an Image Responsive
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使图像响应
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">添加<code>img</code>标记的样式规则，使其响应其容器的大小。它应该显示为块级元素，它应该适合其容器的整个宽度而不拉伸，并且它应该保持其原始的宽高比。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- 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%.");'
|
||||
- text: 你的<code>img</code>标签应该有一个<code>display</code>设置阻止。
|
||||
testString: 'assert($("img").css("display") == "block", "Your <code>img</code> tag should have a <code>display</code> set to block.");'
|
||||
- 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.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,56 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0c
|
||||
title: Make Typography Responsive
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使排版响应
|
||||
---
|
||||
|
||||
## 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>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将<code>h2</code>标记的<code>width</code>设置为视口宽度的80％，将段落的<code>width</code>设置为视口较小尺寸的75％。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>h2</code>标签应该有80vw的<code>width</code> 。
|
||||
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.");'
|
||||
- text: 你的<code>p</code>标签应该有75vmin的<code>width</code> 。
|
||||
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.");'
|
||||
|
||||
```
|
||||
|
||||
</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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,55 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0a
|
||||
title: Use a Retina Image for Higher Resolution Displays
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用Retina图像获得更高分辨率的显示
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">使图像显示为“视网膜”（并为视网膜显示进行优化）的最简单方法是将其<code>width</code>和<code>height</code>值定义为原始文件的一半。以下是仅使用原始高度和宽度的一半的图像示例： <blockquote> <风格> <br> img {身高：250px;宽度：250px; } <br> </样式> <br> <img src =“coolPic500x500”alt =“最精彩的图片”> </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将<code>img</code>标记的<code>width</code>和<code>height</code>设置为原始值的一半。在这种情况下，原始<code>height</code>和原始<code>width</code>都是200px。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 你的<code>img</code>标签应该有100像素的<code>width</code> 。
|
||||
testString: 'assert($("img").css("width") == "100px", "Your <code>img</code> tag should have a <code>width</code> of 100 pixels.");'
|
||||
- text: 你的<code>img</code>标签应该有100像素的<code>height</code> 。
|
||||
testString: 'assert($("img").css("height") == "100px", "Your <code>img</code> tag should have a <code>height</code> of 100 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</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'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user