CSS中能否将minmax()函数与响应式长度属性结合使用？

你的问题核心是用错了CSS函数——minmax()是CSS Grid布局中定义轨道尺寸的专用函数，不能直接用来计算字体大小，这就是浏览器不识别、尺寸超出范围的原因。

正确实现方案 #

要实现“随视窗宽度变化且限制在最小/最大值之间”的字体大小，clamp()函数是最优解，它专门处理“取介于最小值、首选值、最大值之间结果”的场景：

1. 直接给元素设置（最简单）

p {
    font-size: clamp(10pt, 1.8vw, 14pt);
}

• clamp(min, preferred, max)逻辑：当1.8vw小于10pt时用10pt；大于14pt时用14pt；中间值随视窗宽度按1.8vw动态变化。

2. 结合自定义属性（复用尺寸逻辑）

如果需要在多个元素复用这个尺寸规则，用自定义属性配合clamp()即可：

.outer {
    --font-size: clamp(10pt, 1.8vw, 14pt);
}
p {
    font-size: var(--font-size);
}

3. 用@property定义可继承的自定义属性

如果一定要用@property，注意initial-value必须符合你定义的<length>语法，clamp()返回的是合法长度值，写法如下：

@property --font-size-norm {
    syntax: "<length>";
    inherits: true;
    initial-value: clamp(10pt, 1.8vw, 14pt);
}
p {
    font-size: var(--font-size-norm);
}

关于@property的求值时机 #

@property的initial-value是在自定义属性被使用时求值的，不是定义阶段。也就是说，当元素用到var(--font-size-norm)时，浏览器才会计算clamp()的结果，因此能正常响应视窗宽度变化。

内容的提问来源于stack exchange，提问作者U. Windl