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

chore(i18n,curriculum): update translations (#42298)

Browse Source
This commit is contained in:
camperbot
2021-05-31 16:57:24 +09:00
committed by GitHub
parent 8705c0ec81
commit 6e661efe17
2 changed files with 22 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,13 +13,13 @@ dashedName: create-a-media-query
媒體查詢由媒體類型組成，如果媒體類型與展示網頁的設備類型匹配，則應用對應的樣式。 你可以在媒體查詢中使用各種選擇器和樣式。 媒體查詢由媒體類型組成，如果媒體類型與展示網頁的設備類型匹配，則應用對應的樣式。 你可以在媒體查詢中使用各種選擇器和樣式。
下面是一個媒體查詢的例子，當設備寬度小於或等於 100px 時返回內容： 下面是一個媒體查詢的例子，當設備寬度小於或等於 `100px` 時返回內容：
```css ```css
@media (max-width: 100px) { /* CSS Rules */ } @media (max-width: 100px) { /* CSS Rules */ }
``` ```
以下定義的媒體查詢，是當設備高度大於或等於 350px 時返回內容： 以下定義的媒體查詢，是當設備高度大於或等於 `350px` 時返回內容：
```css ```css
@media (min-height: 350px) { /* CSS Rules */ } @media (min-height: 350px) { /* CSS Rules */ }
@ -33,38 +33,25 @@ dashedName: create-a-media-query
# --hints-- # --hints--
應使用 `@media` 聲明媒體查詢，其中應包含 `height` 小於等於 800px 的規則。 你應使用 `@media` 聲明媒體查詢，其中應包含 `height` 小於等於 `800px` 的規則。
```js ```js
assert( const media = new __helpers.CSSHelp(document).getCSSRules('media');
$('style') assert(media.some(x => x.conditionText?.includes('(max-height: 800px)')));
.text()
.replace(/\s/g, '')
.match(/@media\(max-height:800px\)/g)
);
``` ```
當設備 `height` 小於等於 800px 時，`p` 元素 `font-size` 應爲 10px。 當設備 `height` 小於等於 `800px` 時，`p` 元素的 `font-size` 應爲 `10px`。
```js ```js
assert( const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-height: 800px)');
$('style') assert(rules?.find(x => x.selectorText === 'p')?.style.fontSize === "10px");
.text()
.replace(/\s/g, '')
.match(/@media\(max-height:800px\){p{font-size:10px;?}}/g)
);
``` ```
當設備的 `height` 大於 800px 時，`p` 元素的 `font-size` 應設置爲其初始值 20px。 當設備 `height` 大於 `800px` 時，`p` 元素的 `font-size` 應爲 `20px`。
```js ```js
assert( const ifPFirst = new __helpers.CSSHelp(document).getCSSRules()?.find(x => x?.selectorText === 'p' || x?.media);
$('style') assert(ifPFirst?.style?.fontSize === '20px');
.text()
.replace(/\s/g, '')
.replace(/@media.*}/g, '')
.match(/p{font-size:20px;?}/g)
);
``` ```
# --seed-- # --seed--

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

@ -13,13 +13,13 @@ dashedName: create-a-media-query
媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式。 你可以在媒体查询中使用各种选择器和样式。 媒体查询由媒体类型组成，如果媒体类型与展示网页的设备类型匹配，则应用对应的样式。 你可以在媒体查询中使用各种选择器和样式。
下面是一个媒体查询的例子，当设备宽度小于或等于 100px 时返回内容： 下面是一个媒体查询的例子，当设备宽度小于或等于 `100px` 时返回内容：
```css ```css
@media (max-width: 100px) { /* CSS Rules */ } @media (max-width: 100px) { /* CSS Rules */ }
``` ```
以下定义的媒体查询，是当设备高度大于或等于 350px 时返回内容： 以下定义的媒体查询，是当设备高度大于或等于 `350px` 时返回内容：
```css ```css
@media (min-height: 350px) { /* CSS Rules */ } @media (min-height: 350px) { /* CSS Rules */ }
@ -33,38 +33,25 @@ dashedName: create-a-media-query
# --hints-- # --hints--
应使用 `@media` 声明媒体查询，其中应包含 `height` 小于等于 800px 的规则。 你应使用 `@media` 声明媒体查询，其中应包含 `height` 小于等于 `800px` 的规则。
```js ```js
assert( const media = new __helpers.CSSHelp(document).getCSSRules('media');
$('style') assert(media.some(x => x.conditionText?.includes('(max-height: 800px)')));
.text()
.replace(/\s/g, '')
.match(/@media\(max-height:800px\)/g)
);
``` ```
当设备 `height` 小于等于 800px 时，`p` 元素 `font-size` 应为 10px。 当设备 `height` 小于等于 `800px` 时，`p` 元素的 `font-size` 应为 `10px`。
```js ```js
assert( const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-height: 800px)');
$('style') assert(rules?.find(x => x.selectorText === 'p')?.style.fontSize === "10px");
.text()
.replace(/\s/g, '')
.match(/@media\(max-height:800px\){p{font-size:10px;?}}/g)
);
``` ```
当设备的 `height` 大于 800px 时，`p` 元素的 `font-size` 应设置为其初始值 20px。 当设备 `height` 大于 `800px` 时，`p` 元素的 `font-size` 应为 `20px`。
```js ```js
assert( const ifPFirst = new __helpers.CSSHelp(document).getCSSRules()?.find(x => x?.selectorText === 'p' || x?.media);
$('style') assert(ifPFirst?.style?.fontSize === '20px');
.text()
.replace(/\s/g, '')
.replace(/@media.*}/g, '')
.match(/p{font-size:20px;?}/g)
);
``` ```
# --seed-- # --seed--