跳到主要内容

CSS 变量媒体查询

在现代网页设计中，响应式设计是至关重要的。CSS 自定义属性（也称为 CSS 变量）与媒体查询的结合，为我们提供了一种灵活且强大的方式来创建响应式布局。本文将详细介绍如何使用 CSS 变量和媒体查询来实现这一目标。

什么是 CSS 变量？​

CSS 自定义属性，通常称为 CSS 变量，允许你在 CSS 中定义可重用的值。这些变量可以在整个样式表中使用，并且可以通过 JavaScript 动态修改。CSS 变量的定义方式如下：

css
:root {
  --primary-color: #3498db;
}

在这个例子中，--primary-color 是一个 CSS 变量，它的值是 #3498db。你可以在其他地方使用这个变量：

css
body {
  background-color: var(--primary-color);
}

什么是媒体查询？​

媒体查询是 CSS3 中的一个功能，允许你根据设备的特性（如屏幕宽度、高度、分辨率等）来应用不同的样式。例如，你可以为不同的屏幕宽度定义不同的样式：

css
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

在这个例子中，当屏幕宽度小于或等于 600px 时，背景颜色将变为浅蓝色。

结合 CSS 变量与媒体查询​

将 CSS 变量与媒体查询结合使用，可以让你更灵活地控制响应式设计。你可以在媒体查询中重新定义 CSS 变量的值，从而在不同的屏幕尺寸下应用不同的样式。

示例：响应式颜色​

假设你有一个网站，希望在移动设备和桌面设备上使用不同的主色调。你可以这样做：

css
:root {
  --primary-color: #3498db;
}

@media (max-width: 600px) {
  :root {
    --primary-color: #e74c3c;
  }
}

body {
  background-color: var(--primary-color);
}

在这个例子中，当屏幕宽度小于或等于 600px 时，--primary-color 的值将变为 #e74c3c，从而使背景颜色变为红色。

示例：响应式字体大小​

你还可以使用 CSS 变量和媒体查询来调整字体大小：

css
:root {
  --font-size: 16px;
}

@media (max-width: 600px) {
  :root {
    --font-size: 14px;
  }
}

body {
  font-size: var(--font-size);
}

在这个例子中，当屏幕宽度小于或等于 600px 时，字体大小将从 16px 变为 14px。

实际应用场景​

1. 响应式布局​

假设你有一个两列布局，希望在移动设备上变为单列布局。你可以使用 CSS 变量和媒体查询来实现：

css
:root {
  --column-width: 50%;
}

@media (max-width: 600px) {
  :root {
    --column-width: 100%;
  }
}

.column {
  width: var(--column-width);
}

在这个例子中，当屏幕宽度小于或等于 600px 时，列的宽度将从 50% 变为 100%。

2. 主题切换​

你可以使用 CSS 变量和媒体查询来实现根据用户偏好（如暗模式）切换主题：

css
:root {
  --background-color: white;
  --text-color: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: black;
    --text-color: white;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

在这个例子中，如果用户偏好暗模式，背景颜色将变为黑色，文字颜色将变为白色。

总结​

CSS 变量与媒体查询的结合为响应式设计提供了极大的灵活性。通过在不同的屏幕尺寸或用户偏好下重新定义 CSS 变量的值，你可以轻松地创建适应不同设备和环境的样式。

附加资源与练习​

  • 练习 1：创建一个响应式布局，使用 CSS 变量和媒体查询来调整列的宽度和间距。
  • 练习 2：实现一个根据用户偏好（如暗模式）切换主题的功能。
提示

你可以使用浏览器的开发者工具来调试 CSS 变量和媒体查询，查看它们在不同条件下的表现。

希望本文能帮助你更好地理解和使用 CSS 变量与媒体查询。继续练习和探索，你将能够创建更加灵活和响应式的网页设计！