css的变量,css media query,css媒体查询 @media,css媒体查询是什么,css @media,css使用变量
CSS变量是在CSS中定义的一种值，可以在整个文档中重复使用，并且可以在运行时动态地更改。媒体查询是一种CSS技术，它允许根据设备的不同特性（例如屏幕宽度或设备方向）应用不同的样式规则。

在CSS中定义一个变量需要使用--开头的名称，并在冒号后指定值。例如：

css
:root {
--primary-color: #007bff;
}


要使用该变量，请将其包含在var()函数中，并作为值分配给属性。例如：

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


媒体查询使用@media关键字指定，后面跟着括号中的设备特性和样式规则。例如：

css
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}


结合使用这两种技术，可以在不同设备上使用不同的变量值。例如：

css
:root {
--primary-color: blue;
}

@media screen and (max-width: 600px) {
:root {
--primary-color: red;
}
}

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


在此示例中，当屏幕宽度小于或等于600像素时，按钮的背景颜色将为红色，否则为蓝色。