响应式文本字号问题：缩小浏览器宽度时字号过大

1. 修正媒体查询逻辑 #

你当前的媒体查询使用max-width:1000px，会让**所有宽度≤1000px的屏幕（包括缩小窗口的笔记本）**都触发大字号，这是问题核心。要精准匹配手机等移动设备，可结合触摸设备特性筛选：

/* 默认大屏（笔记本）样式 */
.toolbar h1 {
    font-size: 2.4rem;
}

/* 仅针对触摸类移动设备，且宽度≤1000px时生效 */
@media screen and (max-width: 1000px) and (pointer: coarse) {
    .toolbar h1 {
        font-size: 4.4rem;
    }
}

2. 用视窗单位实现平滑缩放 #

如果想要字号随屏幕宽度平滑过渡而非断点突变，推荐使用clamp()函数结合视窗单位：

/* 根元素基础字号（可选，增强rem灵活性） */
html {
    font-size: 16px;
}

.toolbar h1 {
    /* 自动在2.4rem到4.4rem之间随屏幕宽度缩放 */
    font-size: clamp(2.4rem, 5vw + 1rem, 4.4rem);
}

• clamp()会根据视窗宽度自动选择合适字号：小屏用上限4.4rem，大屏用下限2.4rem，中间区间按比例平滑变化。
• 可调整5vw + 1rem的系数，适配你需要的缩放速度。

3. 视窗单位无效的排查与修正 #

你之前写的calc(7px+0.5rem)没有效果，一是因为没有包含视窗单位（vw/vh），二是calc语法要求运算符前后加空格，正确写法示例：

font-size: calc(0.5rem + 2vw);

内容的提问来源于stack exchange，提问作者Vishal