1.1 KiB
1.1 KiB
| id | title | challengeType | videoUrl | forumTopicId |
|---|---|---|---|---|
| 5a9d72ad424fe3d0e10cad16 | 使用媒体查询更改变量 | 0 | https://scrimba.com/c/cWmL8UP | 301091 |
--description--
CSS 变量可以简化媒体查询的定义方式。
例如，当屏幕小于或大于媒体查询所设置的值，只要我们更新变量的值，那么使用了此变量的元素样式就都会更改。
--instructions--
在 media query（媒体查询）声明的 :root 选择器里，重定义 --penguin-size 的值为 200px，且重定义 --penguin-skin 的值为 black，然后通过缩放页面来查看它们是否生效。
--hints--
:root 中的 --penguin-size 值应为 200px。
assert(
code.match(
/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi
)
);
:root 中的 --penguin-skin 值应为 black。
assert(
code.match(
/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi
)
);