2.2 KiB
2.2 KiB
| id | title | challengeType | videoUrl | localeTitle |
|---|---|---|---|---|
| 587d78b1367417b2b2512b0c | Make Typography Responsive | 0 | 使排版响应 |
Description
em或px来调整文本大小。视口单位（如百分比）是相对单位，但它们基于不同的项目。视口单元相对于设备的视口尺寸（宽度或高度），百分比相对于父容器元素的大小。四个不同的视口单元是： -
vw: 10vw将是视口宽度的10％。 -
vh: 3vh将是视口高度的3％。 -
vmin: 70vmin将是视口较小尺寸（高度与宽度）的70％。 -
vmax: 100vmax将是视口较大尺寸（高度与宽度）的100％。
Instructions
h2标记的width设置为视口宽度的80％，将段落的width设置为视口较小尺寸的75％。 Tests
tests:
- text: 你的<code>h2</code>标签应该有80vw的<code>width</code> 。
testString: 'assert(code.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g), "Your <code>h2</code> tag should have a <code>width</code> of 80vw.");'
- text: 你的<code>p</code>标签应该有75vmin的<code>width</code> 。
testString: 'assert(code.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g), "Your <code>p</code> tag should have a <code>width</code> of 75vmin.");'
Challenge Seed
<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>
Solution
// solution required