【CSS】css变量的使用

巴拉拉L

于 2018-11-20 22:18:41 发布

阅读量226

点赞数

分类专栏： css

本文链接：https://blog.youkuaiyun.com/weixin_39602178/article/details/84310992

版权

5 篇文章

订阅专栏

本文探讨了CSS变量的使用，包括全局与局部变量声明、变量的正确使用方法及响应式布局的应用。通过实例展示了如何定义和使用CSS变量，以及在不同设备上设置变量值实现响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

:root{
	--primary-color: #f2f2f2;
}

b{
	color: var(--primary-color);
	--boldsize: 30px;
	font-size: var(--boldsize);
}
em{
	font-size: var(--boldsize);
}

注意：css变量大小写敏感。

在上面的例子中可以看到，使用css变量需要用到var()函数。该函数第一个参数为变量名，第二个参数为变量默认值（若变量不存在，则使用默认值）。

错误示范↓

:root {
 --size: 20
}

div {
  font-size: var(--size)px 
}

正确用法↓ （使用了cal()函数）

div {
  font-size: calc(var(--size) * 1px) 
}

可以根据不同设备设置不同的变量值。

:root {
 --size: 10px 
}

@media screen and (min-width: 768px) {
    --size: 30px
}