媒体查询中的特征值支持变量吗?

Question

例如 @media screen and (min-width: 768px){} 中的 768px 需要是一个变量,但是发现如果使用 css 的自定义属性是不支持的, min-width: var(--xs)。目前使用的是 scss 等预处理器。css 目前来看不考虑兼容性有对这方面的支持吗?

Answer 1

查了下规范，媒体查询确实不支持变量，楼主可以考虑下用clamp能否实现相同效果：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clamp，clamp是支持变量的

Answer 2

试试vue命令v-bind

<script>
const px = '750px'
</script>

<style lang="scss">
.a{
@media screen and (min-width: v-bind(px)){
}
}
</style>