chore(i8n,learn): processed translations
This commit is contained in:
Crowdin Bot
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
15047f2d90
commit
e5c44a3ae5
@ -2,16 +2,16 @@
|
||||
id: 587d78b0367417b2b2512b08
|
||||
title: 创建一个媒体查询
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 1
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/cqwKrtm'
|
||||
forumTopicId: 301139
|
||||
dashedName: create-a-media-query
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
媒体查询是 CSS3 中引入的一项新技术，它可以根据不同的视口大小调整内容的布局。视口是指浏览器中，用户可见的网页内容。视口会随访问网站的设备不同而改变。
|
||||
媒体查询是 CSS3 中引入的一项新技术，它可以根据不同的视口大小调整内容的布局。 视口是指浏览器中，用户可见的网页内容。 视口会随访问网站的设备不同而改变。
|
||||
|
||||
媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式。你可以在媒体查询中使用各种选择器和样式。
|
||||
媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式。 你可以在媒体查询中使用各种选择器和样式。
|
||||
|
||||
下面是一个媒体查询的例子，当设备宽度小于或等于 100px 时返回内容：
|
||||
|
||||
@ -25,7 +25,7 @@ dashedName: create-a-media-query
|
||||
|
||||
# --instructions--
|
||||
|
||||
请添加一条媒体查询规则，当设备的高度小于等于 800px 时，`p` 标签的 `font-size` 为 `10px`。
|
||||
请添加一条媒体查询规则，当设备的高度小于等于 `800px` 时，`p` 标签的 `font-size` 为 `10px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
id: 587d78b1367417b2b2512b09
|
||||
title: 使图片自适应设备尺寸
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 1
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/cz763UD'
|
||||
forumTopicId: 301140
|
||||
dashedName: make-an-image-responsive
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
用 CSS 来让图片自适应其实很简单。你只需要给图片添加这些属性:
|
||||
用 CSS 来让图片自适应其实很简单。 你只需要给图片添加这些属性:
|
||||
|
||||
```css
|
||||
img {
|
||||
@ -22,7 +22,7 @@ img {
|
||||
|
||||
# --instructions--
|
||||
|
||||
给 `responsive-img` 添加样式规则，使其成为响应式的图片。它不应该超出父容器（在本例中，即预览窗口）的范围，并保持宽高比不变。添加代码后，拖动浏览器窗口，看看图片发生什么变化。
|
||||
给 `responsive-img` 添加样式规则，使其成为响应式的图片。 它不应该超出父容器（在本例中，即预览窗口）的范围，并保持宽高比不变。 添加代码后，拖动浏览器窗口，看看图片发生什么变化。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -2,26 +2,26 @@
|
||||
id: 587d78b1367417b2b2512b0c
|
||||
title: 使排版根据设备尺寸自如响应
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 1
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/crzN7T8'
|
||||
forumTopicId: 301141
|
||||
dashedName: make-typography-responsive
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
除了使用 `em` 或 `px` 设置文本大小，你还可以用视窗单位来做响应式排版。视窗单位和百分比都是相对单位，但它们是基于不同的参照物。视窗单位是相对于设备的视窗尺寸（宽度或高度），百分比是相对于父级元素的大小。
|
||||
除了使用 `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%。
|
||||
下面这个例子是设置 `body` 标签的宽度为视窗宽度的 30%。
|
||||
|
||||
`body { width: 30vw; }`
|
||||
|
||||
# --instructions--
|
||||
|
||||
请将 `h2` 标签的 `width` 设置为视窗宽度的 80%，`p` 标签的 `width` 为视窗高度和宽度中较小值的 75%。
|
||||
请将 `h2` 标签的 `width` 设置为视窗宽度的 80%，将段落的 `width` 设置为视窗高度和宽度中较小值的 75%。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -2,16 +2,16 @@
|
||||
id: 587d78b1367417b2b2512b0a
|
||||
title: 针对高分辨率屏幕应使用视网膜图片
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 1
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/cVZ4Rfp'
|
||||
forumTopicId: 301142
|
||||
dashedName: use-a-retina-image-for-higher-resolution-displays
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
随着联网设备的增加，设备间的区别不仅发生在尺寸和规格上，还发生在用于显示的设备上。像素密度就是区分不同显示设备的一个指标，它一般会以 PPI（Pixel Per Inch，即每英寸像素）或 DPI（每英寸点数）为计量单位。最著名的显示器就是 Apple MacBook Pro 笔记本电脑上的“视网膜显示屏”（现亦用于 iMac）。由于“视网膜显示屏”和“非视网膜显示屏”显示器之间像素密度的不同，某些未考虑高分辨率显示器的图像在高分辨率显示器上渲染时，可能因出现“像素化”而不够清晰。
|
||||
随着联网设备的增加，设备间的区别不仅发生在尺寸和规格上，还发生在用于显示的设备上。 像素密度就是区分不同显示设备的一个指标，它一般会以 PPI（Pixel Per Inch，即每英寸像素）或 DPI（每英寸点数）为计量单位。 最著名的显示器就是 Apple MacBook Pro 笔记本电脑上的“视网膜显示屏”（现亦用于 iMac）。 由于“视网膜显示屏”和“非视网膜显示屏”显示器之间像素密度的不同，某些未考虑高分辨率显示器的图像在高分辨率显示器上渲染时，可能因出现“像素化”而不够清晰。
|
||||
|
||||
要让图像在高分辨率显示器（例如 MacBook Pro 的“视网膜显示屏”）上正常显示，最简单的方法是将其 width 和 height 值设置为原始文件的一半，如下所示：
|
||||
让图像正确出现在高分辨率显示器（例如 MacBook Pros “Revistina display”）上的最简单方式， 是定义它们的 `width` 和 `height` 值为原始值的一半。 下面是一个仅使用原始高度和宽度一半的图像示例：
|
||||
|
||||
```html
|
||||
<style>
|
||||
@ -22,20 +22,20 @@ dashedName: use-a-retina-image-for-higher-resolution-displays
|
||||
|
||||
# --instructions--
|
||||
|
||||
请将 `img` 标签的 `width` 和 `height` 设置为它们原始宽高的一半。在这个例子中，原始 `height` 和 `width` 的值都为 200px。
|
||||
设置 `img` 标签的 `width` 和 `height` 为它们的原始值的一半。 在这个例子中，原始 `height` 和原始 `width` 的值都为 `200px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`img` 标签的 `width` 属性值应为 100px。
|
||||
|
||||
```js
|
||||
assert($('img').css('width') == '100px');
|
||||
assert(document.querySelector('img').width === 100);
|
||||
```
|
||||
|
||||
`img` 标签的 `height` 属性值应为 100px。
|
||||
|
||||
```js
|
||||
assert($('img').css('height') == '100px');
|
||||
assert(document.querySelector('img').height === 100);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
Reference in New Issue
Block a user