Files

Nicholas Carrigan (he/him) 3da4be21bb chore: seed chinese traditional (#42005 )

Seeds the chinese traditional files manually so we can deploy to
staging.

2021-05-05 22:43:49 +05:30

2.6 KiB

Raw Permalink Blame History

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78b1367417b2b2512b0c	使排版根據設備尺寸自如響應	0	https://scrimba.com/p/pzrPu4/crzN7T8	301141	make-typography-responsive

--description--

除了使用 em 或 px 設置文本大小，你還可以用視窗單位來做響應式排版。視窗單位和百分比都是相對單位，但它們是基於不同的參照物。視窗單位是相對於設備的視窗尺寸（寬度或高度），百分比是相對於父級元素的大小。

四個不同的視窗單位分別是：

vw：如 10vw 的意思是視窗寬度的 10%。
vh： 如 3vh 的意思是視窗高度的 3%。
vmin： 如 70vmin 的意思是視窗的高度和寬度中較小一個的 70%。
vmax： 如 100vmax 的意思是視窗的高度和寬度中較大一個的 100%。

下面這個例子是設置 body 標籤的寬度爲視窗寬度的 30%。

body { width: 30vw; }

--instructions--

請將 h2 標籤的 width 設置爲視窗寬度的 80%，將段落的 width 設置爲視窗高度和寬度中較小值的 75%。

--hints--

h2 元素的 width 應爲 80vw。

assert(
  __helpers
    .removeCssComments(code)
    .match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g)
);

p 元素的 width 應爲 75vmin。

assert(
  __helpers
    .removeCssComments(code)
    .match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g)
);

--seed--

--seed-contents--

<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--

<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>

2.6 KiB Raw Permalink Blame History Unescape Escape