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