CSS 媒体查询(@media)宽度范围设置建议

1. 语法正确性：

• 代码使用现代范围查询语法(width >= 1200px and width < 1400px)，在支持该语法的浏览器（如Chrome 104+、Firefox 63+、Safari 15.4+）中有效。

2. 逻辑正确性：

• 当视口宽度在1200px（含）至1400px（不含）之间时，body的padding-top会设置为4px，符合用户需求。

3. 兼容性建议：

• 传统写法：为兼容旧版浏览器，建议改用：

@media (width >= 1200px and width < 1400px) {
    body {
        padding-top: 4px;
    }
}

• 使用1399.98px避免在1400px时触发，确保边界准确。

4. 边界值注意：

• 在1400px时样式不会应用，确保符合设计需求。测试时检查1200px、1399px和1400px的情况。

5. 格式优化：

• 调整多余空格，保持代码整洁：

@media (width >= 1200px and width < 1400px) {
    body {
        padding-top: 4px;
    }
}

最终建议代码：

/* 现代浏览器（推荐） */
@media (1200px <= width < 1400px) {
    body {
        padding-top: 4px;
    }
}

/* 或兼容旧浏览器的写法 */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    body {
        padding-top: 4px;
    }
}

根据目标浏览器的支持情况选择合适的写法，并测试边界值以确保效果符合预期。