chore: seed chinese traditional (#42005)
Seeds the chinese traditional files manually so we can deploy to staging.
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
e46e80e08f
commit
3da4be21bb
@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 587d78b0367417b2b2512b08
|
||||
title: 創建一個媒體查詢
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/cqwKrtm'
|
||||
forumTopicId: 301139
|
||||
dashedName: create-a-media-query
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
媒體查詢是 CSS3 中引入的一項新技術，它可以根據不同的視口大小調整內容的佈局。 視口是指瀏覽器中，用戶可見的網頁內容。 視口會隨訪問網站的設備不同而改變。
|
||||
|
||||
媒體查詢由媒體類型組成，如果媒體類型與展示網頁的設備類型匹配，則應用對應的樣式。 你可以在媒體查詢中使用各種選擇器和樣式。
|
||||
|
||||
下面是一個媒體查詢的例子，當設備寬度小於或等於 100px 時返回內容：
|
||||
|
||||
```css
|
||||
@media (max-width: 100px) { /* CSS Rules */ }
|
||||
```
|
||||
|
||||
以下定義的媒體查詢，是當設備高度大於或等於 350px 時返回內容：
|
||||
|
||||
```css
|
||||
@media (min-height: 350px) { /* CSS Rules */ }
|
||||
```
|
||||
|
||||
注意，只有當媒體類型與所使用的設備的類型匹配時，媒體查詢中定義的 CSS 才生效。
|
||||
|
||||
# --instructions--
|
||||
|
||||
請添加一條媒體查詢規則，當設備的高度小於等於 `800px` 時，`p` 標籤的 `font-size` 爲 `10px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
應使用 `@media` 聲明媒體查詢，其中應包含 `height` 小於等於 800px 的規則。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('style')
|
||||
.text()
|
||||
.replace(/\s/g, '')
|
||||
.match(/@media\(max-height:800px\)/g)
|
||||
);
|
||||
```
|
||||
|
||||
當設備 `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)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
</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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (max-height: 800px) {
|
||||
p {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b09
|
||||
title: 使圖片自適應設備尺寸
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/cz763UD'
|
||||
forumTopicId: 301140
|
||||
dashedName: make-an-image-responsive
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
用 CSS 來讓圖片自適應其實很簡單。 你只需要給圖片添加這些屬性:
|
||||
|
||||
```css
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
```
|
||||
|
||||
設置 `max-width` 值爲 `100%` 可確保圖片不超出父容器的範圍；設置 `height` 屬性爲 `auto` 可以保持圖片的原始寬高比。
|
||||
|
||||
# --instructions--
|
||||
|
||||
給 `responsive-img` 添加樣式規則，使其成爲響應式的圖片。 它不應該超出父容器（在本例中，即預覽窗口）的範圍，並保持寬高比不變。 添加代碼後，拖動瀏覽器窗口，看看圖片發生什麼變化。
|
||||
|
||||
# --hints--
|
||||
|
||||
`responsive-img` 類應將 `max-width` 設置爲 `100%`。
|
||||
|
||||
```js
|
||||
assert(getComputedStyle($('.responsive-img')[0]).maxWidth === '100%');
|
||||
```
|
||||
|
||||
`responsive-img` 類應將 `height` 設置爲 `auto`。
|
||||
|
||||
```js
|
||||
assert(code.match(/height:\s*?auto;/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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">
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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">
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0c
|
||||
title: 使排版根據設備尺寸自如響應
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pzrPu4/crzN7T8'
|
||||
forumTopicId: 301141
|
||||
dashedName: make-typography-responsive
|
||||
---
|
||||
|
||||
# --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%。
|
||||
|
||||
```css
|
||||
body { width: 30vw; }
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
請將 `h2` 標籤的 `width` 設置爲視窗寬度的 80%，將段落的 `width` 設置爲視窗高度和寬度中較小值的 75%。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 元素的 `width` 應爲 80vw。
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeCssComments(code)
|
||||
.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g)
|
||||
);
|
||||
```
|
||||
|
||||
`p` 元素的 `width` 應爲 75vmin。
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeCssComments(code)
|
||||
.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
width: 80vw;
|
||||
}
|
||||
p {
|
||||
width: 75vmin;
|
||||
}
|
||||
</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>
|
||||
```
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0a
|
||||
title: 針對高分辨率屏幕應使用視網膜圖片
|
||||
challengeType: 0
|
||||
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）。 由於“視網膜顯示屏”和“非視網膜顯示屏”顯示器之間像素密度的不同，某些未考慮高分辨率顯示器的圖像在高分辨率顯示器上渲染時，可能因出現“像素化”而不夠清晰。
|
||||
|
||||
讓圖像正確出現在高分辨率顯示器（例如 MacBook Pros “Revistina display”）上的最簡單方式， 是定義它們的 `width` 和 `height` 值爲原始值的一半。 下面是一個僅使用原始高度和寬度一半的圖像示例：
|
||||
|
||||
```html
|
||||
<style>
|
||||
img { height: 250px; width: 250px; }
|
||||
</style>
|
||||
<img src="coolPic500x500" alt="A most excellent picture">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
設置 `img` 標籤的 `width` 和 `height` 爲它們的原始值的一半。 在這個例子中，原始 `height` 和原始 `width` 的值都爲 `200px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`img` 標籤的 `width` 屬性值應爲 100px。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').width === 100);
|
||||
```
|
||||
|
||||
`img` 標籤的 `height` 屬性值應爲 100px。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img').height === 100);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
img {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
|
||||
```
|
||||
Reference in New Issue
Block a user