1.0 KiB
1.0 KiB
id, title, challengeType, videoUrl, forumTopicId
| 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
)
);