freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md

---
id: 5a9d72ad424fe3d0e10cad16
title: 使用媒体查询更改变量
challengeType: 0
videoUrl: 'https://scrimba.com/c/cWmL8UP'
forumTopicId: 301091
---

# --description--

CSS 变量可以简化媒体查询的定义方式。

例如，当屏幕小于或大于媒体查询所设置的值，只要我们更新变量的值，那么使用了此变量的元素样式就都会更改。

# --instructions--

在 `media query`（媒体查询）声明的 `:root` 选择器里，重定义 `--penguin-size` 的值为 200px，且重定义 `--penguin-skin` 的值为 `black`，然后通过缩放页面来查看它们是否生效。

# --hints--

`:root` 中的 `--penguin-size` 值应为 `200px`。

```js
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`。

```js
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
  )
);
```

# --solutions--