1.4 KiB
1.4 KiB
id, title, challengeType, videoUrl, forumTopicId
| id | title | challengeType | videoUrl | forumTopicId |
|---|---|---|---|---|
| 587d78b1367417b2b2512b0c | 使排版根据设备尺寸自如响应 | 0 | https://scrimba.com/c/cPp7VfD | 1 |
--description--
除了使用 em 或 px 设置文本大小，你还可以用视窗单位来做响应式排版。视窗单位和百分比都是相对单位，但它们是基于不同的参照物。视窗单位是相对于设备的视窗尺寸（宽度或高度），百分比是相对于父级元素的大小。
四个不同的视窗单位分别是：
vw：如10vw的意思是视窗宽度的 10%。vh：如3vh的意思是视窗高度的 3%。vmin：如70vmin的意思是视窗的高度和宽度中较小一个的 70%。vmax：如100vmax的意思是视窗的高度和宽度中较大一个的 100%。
下面这个例子是设置 body 标签的宽度为视窗宽度的 30%。
body { width: 30vw; }
--instructions--
请将 h2 标签的 width 设置为视窗宽度的 80%，p 标签的 width 为视窗高度和宽度中较小值的 75%。
--hints--
h2 元素的 width 应为 80vw。
assert(code.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g));
p 元素的 width 应为 75vmin。
assert(code.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g));